/*! p5.js v1.9.1 February 29, 2024 */ (function (f) { if (typeof exports === 'object' && typeof module !== 'undefined') { module.exports = f() } else if (typeof define === 'function' && define.amd) { define([], f) } else { var g; if (typeof window !== 'undefined') { g = window } else if (typeof global !== 'undefined') { g = global } else if (typeof self !== 'undefined') { g = self } else { g = this } g.p5 = f() } }) (function () { var define, module, exports; return (function () { function r(e, n, t) { function o(i, f) { if (!n[i]) { if (!e[i]) { var c = 'function' == typeof require && require; if (!f && c) return c(i, !0); if (u) return u(i, !0); var a = new Error('Cannot find module \'' + i + '\''); throw a.code = 'MODULE_NOT_FOUND', a } var p = n[i] = { exports: { } }; e[i][0].call(p.exports, function (r) { var n = e[i][1][r]; return o(n || r) }, p, p.exports, r, e, n, t) } return n[i].exports } for (var u = 'function' == typeof require && require, i = 0; i < t.length; i++) o(t[i]); return o } return r }) () ({ 1: [ function (_dereq_, module, exports) { module.exports = { 'p5': { 'describe': { 'name': 'describe', 'params': [ { 'name': 'text', 'description': '
description of the canvas.
\n', 'type': 'String' }, { 'name': 'display', 'description': 'either LABEL or FALLBACK.
\n', 'type': 'Constant', 'optional': true } ], 'class': 'p5', 'module': 'Environment' }, 'describeElement': { 'name': 'describeElement', 'params': [ { 'name': 'name', 'description': 'name of the element.
\n', 'type': 'String' }, { 'name': 'text', 'description': 'description of the element.
\n', 'type': 'String' }, { 'name': 'display', 'description': 'either LABEL or FALLBACK.
\n', 'type': 'Constant', 'optional': true } ], 'class': 'p5', 'module': 'Environment' }, 'textOutput': { 'name': 'textOutput', 'params': [ { 'name': 'display', 'description': 'either FALLBACK or LABEL.
\n', 'type': 'Constant', 'optional': true } ], 'class': 'p5', 'module': 'Environment' }, 'gridOutput': { 'name': 'gridOutput', 'params': [ { 'name': 'display', 'description': 'either FALLBACK or LABEL.
\n', 'type': 'Constant', 'optional': true } ], 'class': 'p5', 'module': 'Environment' }, 'alpha': { 'name': 'alpha', 'params': [ { 'name': 'color', 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', 'type': 'p5.Color|Number[]|String' } ], 'class': 'p5', 'module': 'Color' }, 'blue': { 'name': 'blue', 'params': [ { 'name': 'color', 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', 'type': 'p5.Color|Number[]|String' } ], 'class': 'p5', 'module': 'Color' }, 'brightness': { 'name': 'brightness', 'params': [ { 'name': 'color', 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', 'type': 'p5.Color|Number[]|String' } ], 'class': 'p5', 'module': 'Color' }, 'color': { 'name': 'color', 'class': 'p5', 'module': 'Color', 'overloads': [ { 'params': [ { 'name': 'gray', 'description': 'number specifying value between white and black.
\n', 'type': 'Number' }, { 'name': 'alpha', 'description': 'alpha value relative to current color range\n (default is 0-255).
\n', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'v1', 'description': 'red or hue value relative to\n the current color range.
\n', 'type': 'Number' }, { 'name': 'v2', 'description': 'green or saturation value\n relative to the current color range.
\n', 'type': 'Number' }, { 'name': 'v3', 'description': 'blue or brightness value\n relative to the current color range.
\n', 'type': 'Number' }, { 'name': 'alpha', 'description': '', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'value', 'description': 'a color string.
\n', 'type': 'String' } ] }, { 'params': [ { 'name': 'values', 'description': 'an array containing the red, green, blue,\n and alpha components of the color.
\n', 'type': 'Number[]' } ] }, { 'params': [ { 'name': 'color', 'description': '', 'type': 'p5.Color' } ] } ] }, 'green': { 'name': 'green', 'params': [ { 'name': 'color', 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', 'type': 'p5.Color|Number[]|String' } ], 'class': 'p5', 'module': 'Color' }, 'hue': { 'name': 'hue', 'params': [ { 'name': 'color', 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', 'type': 'p5.Color|Number[]|String' } ], 'class': 'p5', 'module': 'Color' }, 'lerpColor': { 'name': 'lerpColor', 'params': [ { 'name': 'c1', 'description': 'interpolate from this color.
\n', 'type': 'p5.Color' }, { 'name': 'c2', 'description': 'interpolate to this color.
\n', 'type': 'p5.Color' }, { 'name': 'amt', 'description': 'number between 0 and 1.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Color' }, 'lightness': { 'name': 'lightness', 'params': [ { 'name': 'color', 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', 'type': 'p5.Color|Number[]|String' } ], 'class': 'p5', 'module': 'Color' }, 'red': { 'name': 'red', 'params': [ { 'name': 'color', 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', 'type': 'p5.Color|Number[]|String' } ], 'class': 'p5', 'module': 'Color' }, 'saturation': { 'name': 'saturation', 'params': [ { 'name': 'color', 'description': 'p5.Color object, array of\n color components, or CSS color string.
\n', 'type': 'p5.Color|Number[]|String' } ], 'class': 'p5', 'module': 'Color' }, 'beginClip': { 'name': 'beginClip', 'params': [ { 'name': 'options', 'description': 'An object containing clip settings.
\n', 'type': 'Object', 'optional': true } ], 'class': 'p5', 'module': 'Color' }, 'endClip': { 'name': 'endClip', 'class': 'p5', 'module': 'Color' }, 'clip': { 'name': 'clip', 'params': [ { 'name': 'callback', 'description': 'A function that draws the mask shape.
\n', 'type': 'Function' }, { 'name': 'options', 'description': 'An object containing clip settings.
\n', 'type': 'Object', 'optional': true } ], 'class': 'p5', 'module': 'Color' }, 'background': { 'name': 'background', 'class': 'p5', 'module': 'Color', 'overloads': [ { 'params': [ { 'name': 'color', 'description': 'any value created by the color() function
\n', 'type': 'p5.Color' } ], 'chainable': 1 }, { 'params': [ { 'name': 'colorstring', 'description': 'color string, possible formats include: integer\n rgb() or rgba(), percentage rgb() or rgba(),\n 3-digit hex, 6-digit hex.
\n', 'type': 'String' }, { 'name': 'a', 'description': 'opacity of the background relative to current\n color range (default is 0-255).
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'gray', 'description': 'specifies a value between white and black.
\n', 'type': 'Number' }, { 'name': 'a', 'description': '', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'v1', 'description': 'red value if color mode is RGB, or hue value if color mode is HSB.
\n', 'type': 'Number' }, { 'name': 'v2', 'description': 'green value if color mode is RGB, or saturation value if color mode is HSB.
\n', 'type': 'Number' }, { 'name': 'v3', 'description': 'blue value if color mode is RGB, or brightness value if color mode is HSB.
\n', 'type': 'Number' }, { 'name': 'a', 'description': '', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'values', 'description': 'an array containing the red, green, blue\n and alpha components of the color.
\n', 'type': 'Number[]' } ], 'chainable': 1 }, { 'params': [ { 'name': 'image', 'description': 'image created with loadImage()\n or createImage(),\n to set as background.\n (must be same size as the sketch window).
\n', 'type': 'p5.Image' }, { 'name': 'a', 'description': '', 'type': 'Number', 'optional': true } ], 'chainable': 1 } ] }, 'clear': { 'name': 'clear', 'params': [ { 'name': 'r', 'description': 'normalized red value.
\n', 'type': 'Number', 'optional': true }, { 'name': 'g', 'description': 'normalized green value.
\n', 'type': 'Number', 'optional': true }, { 'name': 'b', 'description': 'normalized blue value.
\n', 'type': 'Number', 'optional': true }, { 'name': 'a', 'description': 'normalized alpha value.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': 'Color' }, 'colorMode': { 'name': 'colorMode', 'class': 'p5', 'module': 'Color', 'overloads': [ { 'params': [ { 'name': 'mode', 'description': 'either RGB, HSB or HSL, corresponding to\n Red/Green/Blue and Hue/Saturation/Brightness\n (or Lightness).
\n', 'type': 'Constant' }, { 'name': 'max', 'description': 'range for all values.
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'mode', 'description': '', 'type': 'Constant' }, { 'name': 'max1', 'description': 'range for the red or hue depending on the\n current color mode.
\n', 'type': 'Number' }, { 'name': 'max2', 'description': 'range for the green or saturation depending\n on the current color mode.
\n', 'type': 'Number' }, { 'name': 'max3', 'description': 'range for the blue or brightness/lightness\n depending on the current color mode.
\n', 'type': 'Number' }, { 'name': 'maxA', 'description': 'range for the alpha.
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 } ] }, 'fill': { 'name': 'fill', 'class': 'p5', 'module': 'Color', 'overloads': [ { 'params': [ { 'name': 'v1', 'description': 'red value if color mode is RGB or hue value if color mode is HSB.
\n', 'type': 'Number' }, { 'name': 'v2', 'description': 'green value if color mode is RGB or saturation value if color mode is HSB.
\n', 'type': 'Number' }, { 'name': 'v3', 'description': 'blue value if color mode is RGB or brightness value if color mode is HSB.
\n', 'type': 'Number' }, { 'name': 'alpha', 'description': '', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'value', 'description': 'a color string.
\n', 'type': 'String' } ], 'chainable': 1 }, { 'params': [ { 'name': 'gray', 'description': 'a grayscale value.
\n', 'type': 'Number' }, { 'name': 'alpha', 'description': '', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'values', 'description': 'an array containing the red, green, blue &\n and alpha components of the color.
\n', 'type': 'Number[]' } ], 'chainable': 1 }, { 'params': [ { 'name': 'color', 'description': 'the fill color.
\n', 'type': 'p5.Color' } ], 'chainable': 1 } ] }, 'noFill': { 'name': 'noFill', 'class': 'p5', 'module': 'Color' }, 'noStroke': { 'name': 'noStroke', 'class': 'p5', 'module': 'Color' }, 'stroke': { 'name': 'stroke', 'class': 'p5', 'module': 'Color', 'overloads': [ { 'params': [ { 'name': 'v1', 'description': 'red value if color mode is RGB or hue value if color mode is HSB.
\n', 'type': 'Number' }, { 'name': 'v2', 'description': 'green value if color mode is RGB or saturation value if color mode is HSB.
\n', 'type': 'Number' }, { 'name': 'v3', 'description': 'blue value if color mode is RGB or brightness value if color mode is HSB.
\n', 'type': 'Number' }, { 'name': 'alpha', 'description': '', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'value', 'description': 'a color string.
\n', 'type': 'String' } ], 'chainable': 1 }, { 'params': [ { 'name': 'gray', 'description': 'a grayscale value.
\n', 'type': 'Number' }, { 'name': 'alpha', 'description': '', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'values', 'description': 'an array containing the red, green, blue,\n and alpha components of the color.
\n', 'type': 'Number[]' } ], 'chainable': 1 }, { 'params': [ { 'name': 'color', 'description': 'the stroke color.
\n', 'type': 'p5.Color' } ], 'chainable': 1 } ] }, 'erase': { 'name': 'erase', 'params': [ { 'name': 'strengthFill', 'description': 'a number (0-255) for the strength of erasing under a shape\'s interior.\n Defaults to 255, which is full strength.
\n', 'type': 'Number', 'optional': true }, { 'name': 'strengthStroke', 'description': 'a number (0-255) for the strength of erasing under a shape\'s edge.\n Defaults to 255, which is full strength.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': 'Color' }, 'noErase': { 'name': 'noErase', 'class': 'p5', 'module': 'Color' }, 'arc': { 'name': 'arc', 'params': [ { 'name': 'x', 'description': 'x-coordinate of the arc\'s ellipse.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the arc\'s ellipse.
\n', 'type': 'Number' }, { 'name': 'w', 'description': 'width of the arc\'s ellipse by default.
\n', 'type': 'Number' }, { 'name': 'h', 'description': 'height of the arc\'s ellipse by default.
\n', 'type': 'Number' }, { 'name': 'start', 'description': 'angle to start the arc, specified in radians.
\n', 'type': 'Number' }, { 'name': 'stop', 'description': 'angle to stop the arc, specified in radians.
\n', 'type': 'Number' }, { 'name': 'mode', 'description': 'optional parameter to determine the way of drawing\n the arc. either CHORD, PIE, or OPEN.
\n', 'type': 'Constant', 'optional': true }, { 'name': 'detail', 'description': 'optional parameter for WebGL mode only. This is to\n specify the number of vertices that makes up the\n perimeter of the arc. Default value is 25. Won\'t\n draw a stroke for a detail of more than 50.
\n', 'type': 'Integer', 'optional': true } ], 'class': 'p5', 'module': 'Shape' }, 'ellipse': { 'name': 'ellipse', 'class': 'p5', 'module': 'Shape', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'x-coordinate of the center of the ellipse.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the center of the ellipse.
\n', 'type': 'Number' }, { 'name': 'w', 'description': 'width of the ellipse.
\n', 'type': 'Number' }, { 'name': 'h', 'description': 'height of the ellipse.
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'x', 'description': '', 'type': 'Number' }, { 'name': 'y', 'description': '', 'type': 'Number' }, { 'name': 'w', 'description': '', 'type': 'Number' }, { 'name': 'h', 'description': '', 'type': 'Number' }, { 'name': 'detail', 'description': 'optional parameter for WebGL mode only. This is to\n specify the number of vertices that makes up the\n perimeter of the ellipse. Default value is 25. Won\'t\n draw a stroke for a detail of more than 50.
\n', 'type': 'Integer', 'optional': true } ] } ] }, 'circle': { 'name': 'circle', 'params': [ { 'name': 'x', 'description': 'x-coordinate of the center of the circle.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the center of the circle.
\n', 'type': 'Number' }, { 'name': 'd', 'description': 'diameter of the circle.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Shape' }, 'line': { 'name': 'line', 'class': 'p5', 'module': 'Shape', 'overloads': [ { 'params': [ { 'name': 'x1', 'description': 'the x-coordinate of the first point.
\n', 'type': 'Number' }, { 'name': 'y1', 'description': 'the y-coordinate of the first point.
\n', 'type': 'Number' }, { 'name': 'x2', 'description': 'the x-coordinate of the second point.
\n', 'type': 'Number' }, { 'name': 'y2', 'description': 'the y-coordinate of the second point.
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'x1', 'description': '', 'type': 'Number' }, { 'name': 'y1', 'description': '', 'type': 'Number' }, { 'name': 'z1', 'description': 'the z-coordinate of the first point.
\n', 'type': 'Number' }, { 'name': 'x2', 'description': '', 'type': 'Number' }, { 'name': 'y2', 'description': '', 'type': 'Number' }, { 'name': 'z2', 'description': 'the z-coordinate of the second point.
\n', 'type': 'Number' } ], 'chainable': 1 } ] }, 'point': { 'name': 'point', 'class': 'p5', 'module': 'Shape', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'the x-coordinate.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'the y-coordinate.
\n', 'type': 'Number' }, { 'name': 'z', 'description': 'the z-coordinate (for WebGL mode).
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'coordinateVector', 'description': 'the coordinate vector.
\n', 'type': 'p5.Vector' } ], 'chainable': 1 } ] }, 'quad': { 'name': 'quad', 'class': 'p5', 'module': 'Shape', 'overloads': [ { 'params': [ { 'name': 'x1', 'description': 'the x-coordinate of the first point.
\n', 'type': 'Number' }, { 'name': 'y1', 'description': 'the y-coordinate of the first point.
\n', 'type': 'Number' }, { 'name': 'x2', 'description': 'the x-coordinate of the second point.
\n', 'type': 'Number' }, { 'name': 'y2', 'description': 'the y-coordinate of the second point.
\n', 'type': 'Number' }, { 'name': 'x3', 'description': 'the x-coordinate of the third point.
\n', 'type': 'Number' }, { 'name': 'y3', 'description': 'the y-coordinate of the third point.
\n', 'type': 'Number' }, { 'name': 'x4', 'description': 'the x-coordinate of the fourth point.
\n', 'type': 'Number' }, { 'name': 'y4', 'description': 'the y-coordinate of the fourth point.
\n', 'type': 'Number' }, { 'name': 'detailX', 'description': 'number of segments in the x-direction.
\n', 'type': 'Integer', 'optional': true }, { 'name': 'detailY', 'description': 'number of segments in the y-direction.
\n', 'type': 'Integer', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'x1', 'description': '', 'type': 'Number' }, { 'name': 'y1', 'description': '', 'type': 'Number' }, { 'name': 'z1', 'description': 'the z-coordinate of the first point.
\n', 'type': 'Number' }, { 'name': 'x2', 'description': '', 'type': 'Number' }, { 'name': 'y2', 'description': '', 'type': 'Number' }, { 'name': 'z2', 'description': 'the z-coordinate of the second point.
\n', 'type': 'Number' }, { 'name': 'x3', 'description': '', 'type': 'Number' }, { 'name': 'y3', 'description': '', 'type': 'Number' }, { 'name': 'z3', 'description': 'the z-coordinate of the third point.
\n', 'type': 'Number' }, { 'name': 'x4', 'description': '', 'type': 'Number' }, { 'name': 'y4', 'description': '', 'type': 'Number' }, { 'name': 'z4', 'description': 'the z-coordinate of the fourth point.
\n', 'type': 'Number' }, { 'name': 'detailX', 'description': '', 'type': 'Integer', 'optional': true }, { 'name': 'detailY', 'description': '', 'type': 'Integer', 'optional': true } ], 'chainable': 1 } ] }, 'rect': { 'name': 'rect', 'class': 'p5', 'module': 'Shape', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'x-coordinate of the rectangle.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the rectangle.
\n', 'type': 'Number' }, { 'name': 'w', 'description': 'width of the rectangle.
\n', 'type': 'Number' }, { 'name': 'h', 'description': 'height of the rectangle.
\n', 'type': 'Number', 'optional': true }, { 'name': 'tl', 'description': 'optional radius of top-left corner.
\n', 'type': 'Number', 'optional': true }, { 'name': 'tr', 'description': 'optional radius of top-right corner.
\n', 'type': 'Number', 'optional': true }, { 'name': 'br', 'description': 'optional radius of bottom-right corner.
\n', 'type': 'Number', 'optional': true }, { 'name': 'bl', 'description': 'optional radius of bottom-left corner.
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'x', 'description': '', 'type': 'Number' }, { 'name': 'y', 'description': '', 'type': 'Number' }, { 'name': 'w', 'description': '', 'type': 'Number' }, { 'name': 'h', 'description': '', 'type': 'Number' }, { 'name': 'detailX', 'description': 'number of segments in the x-direction (for WebGL mode).
\n', 'type': 'Integer', 'optional': true }, { 'name': 'detailY', 'description': 'number of segments in the y-direction (for WebGL mode).
\n', 'type': 'Integer', 'optional': true } ], 'chainable': 1 } ] }, 'square': { 'name': 'square', 'params': [ { 'name': 'x', 'description': 'x-coordinate of the square.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the square.
\n', 'type': 'Number' }, { 'name': 's', 'description': 'side size of the square.
\n', 'type': 'Number' }, { 'name': 'tl', 'description': 'optional radius of top-left corner.
\n', 'type': 'Number', 'optional': true }, { 'name': 'tr', 'description': 'optional radius of top-right corner.
\n', 'type': 'Number', 'optional': true }, { 'name': 'br', 'description': 'optional radius of bottom-right corner.
\n', 'type': 'Number', 'optional': true }, { 'name': 'bl', 'description': 'optional radius of bottom-left corner.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': 'Shape' }, 'triangle': { 'name': 'triangle', 'params': [ { 'name': 'x1', 'description': 'x-coordinate of the first point.
\n', 'type': 'Number' }, { 'name': 'y1', 'description': 'y-coordinate of the first point.
\n', 'type': 'Number' }, { 'name': 'x2', 'description': 'x-coordinate of the second point.
\n', 'type': 'Number' }, { 'name': 'y2', 'description': 'y-coordinate of the second point.
\n', 'type': 'Number' }, { 'name': 'x3', 'description': 'x-coordinate of the third point.
\n', 'type': 'Number' }, { 'name': 'y3', 'description': 'y-coordinate of the third point.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Shape' }, 'ellipseMode': { 'name': 'ellipseMode', 'params': [ { 'name': 'mode', 'description': 'either CENTER, RADIUS, CORNER, or CORNERS
\n', 'type': 'Constant' } ], 'class': 'p5', 'module': 'Shape' }, 'noSmooth': { 'name': 'noSmooth', 'class': 'p5', 'module': 'Shape' }, 'rectMode': { 'name': 'rectMode', 'params': [ { 'name': 'mode', 'description': 'either CORNER, CORNERS, CENTER, or RADIUS
\n', 'type': 'Constant' } ], 'class': 'p5', 'module': 'Shape' }, 'smooth': { 'name': 'smooth', 'class': 'p5', 'module': 'Shape' }, 'strokeCap': { 'name': 'strokeCap', 'params': [ { 'name': 'cap', 'description': 'either ROUND, SQUARE, or PROJECT
\n', 'type': 'Constant' } ], 'class': 'p5', 'module': 'Shape' }, 'strokeJoin': { 'name': 'strokeJoin', 'params': [ { 'name': 'join', 'description': 'either MITER, BEVEL, or ROUND
\n', 'type': 'Constant' } ], 'class': 'p5', 'module': 'Shape' }, 'strokeWeight': { 'name': 'strokeWeight', 'params': [ { 'name': 'weight', 'description': 'the weight of the stroke (in pixels).
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Shape' }, 'bezier': { 'name': 'bezier', 'class': 'p5', 'module': 'Shape', 'overloads': [ { 'params': [ { 'name': 'x1', 'description': 'x-coordinate for the first anchor point
\n', 'type': 'Number' }, { 'name': 'y1', 'description': 'y-coordinate for the first anchor point
\n', 'type': 'Number' }, { 'name': 'x2', 'description': 'x-coordinate for the first control point
\n', 'type': 'Number' }, { 'name': 'y2', 'description': 'y-coordinate for the first control point
\n', 'type': 'Number' }, { 'name': 'x3', 'description': 'x-coordinate for the second control point
\n', 'type': 'Number' }, { 'name': 'y3', 'description': 'y-coordinate for the second control point
\n', 'type': 'Number' }, { 'name': 'x4', 'description': 'x-coordinate for the second anchor point
\n', 'type': 'Number' }, { 'name': 'y4', 'description': 'y-coordinate for the second anchor point
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'x1', 'description': '', 'type': 'Number' }, { 'name': 'y1', 'description': '', 'type': 'Number' }, { 'name': 'z1', 'description': 'z-coordinate for the first anchor point
\n', 'type': 'Number' }, { 'name': 'x2', 'description': '', 'type': 'Number' }, { 'name': 'y2', 'description': '', 'type': 'Number' }, { 'name': 'z2', 'description': 'z-coordinate for the first control point
\n', 'type': 'Number' }, { 'name': 'x3', 'description': '', 'type': 'Number' }, { 'name': 'y3', 'description': '', 'type': 'Number' }, { 'name': 'z3', 'description': 'z-coordinate for the second control point
\n', 'type': 'Number' }, { 'name': 'x4', 'description': '', 'type': 'Number' }, { 'name': 'y4', 'description': '', 'type': 'Number' }, { 'name': 'z4', 'description': 'z-coordinate for the second anchor point
\n', 'type': 'Number' } ], 'chainable': 1 } ] }, 'bezierDetail': { 'name': 'bezierDetail', 'params': [ { 'name': 'detail', 'description': 'resolution of the curves
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Shape' }, 'bezierPoint': { 'name': 'bezierPoint', 'params': [ { 'name': 'a', 'description': 'coordinate of first point on the curve
\n', 'type': 'Number' }, { 'name': 'b', 'description': 'coordinate of first control point
\n', 'type': 'Number' }, { 'name': 'c', 'description': 'coordinate of second control point
\n', 'type': 'Number' }, { 'name': 'd', 'description': 'coordinate of second point on the curve
\n', 'type': 'Number' }, { 'name': 't', 'description': 'value between 0 and 1
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Shape' }, 'bezierTangent': { 'name': 'bezierTangent', 'params': [ { 'name': 'a', 'description': 'coordinate of first point on the curve
\n', 'type': 'Number' }, { 'name': 'b', 'description': 'coordinate of first control point
\n', 'type': 'Number' }, { 'name': 'c', 'description': 'coordinate of second control point
\n', 'type': 'Number' }, { 'name': 'd', 'description': 'coordinate of second point on the curve
\n', 'type': 'Number' }, { 'name': 't', 'description': 'value between 0 and 1
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Shape' }, 'curve': { 'name': 'curve', 'class': 'p5', 'module': 'Shape', 'overloads': [ { 'params': [ { 'name': 'x1', 'description': 'x-coordinate for the beginning control point
\n', 'type': 'Number' }, { 'name': 'y1', 'description': 'y-coordinate for the beginning control point
\n', 'type': 'Number' }, { 'name': 'x2', 'description': 'x-coordinate for the first point
\n', 'type': 'Number' }, { 'name': 'y2', 'description': 'y-coordinate for the first point
\n', 'type': 'Number' }, { 'name': 'x3', 'description': 'x-coordinate for the second point
\n', 'type': 'Number' }, { 'name': 'y3', 'description': 'y-coordinate for the second point
\n', 'type': 'Number' }, { 'name': 'x4', 'description': 'x-coordinate for the ending control point
\n', 'type': 'Number' }, { 'name': 'y4', 'description': 'y-coordinate for the ending control point
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'x1', 'description': '', 'type': 'Number' }, { 'name': 'y1', 'description': '', 'type': 'Number' }, { 'name': 'z1', 'description': 'z-coordinate for the beginning control point
\n', 'type': 'Number' }, { 'name': 'x2', 'description': '', 'type': 'Number' }, { 'name': 'y2', 'description': '', 'type': 'Number' }, { 'name': 'z2', 'description': 'z-coordinate for the first point
\n', 'type': 'Number' }, { 'name': 'x3', 'description': '', 'type': 'Number' }, { 'name': 'y3', 'description': '', 'type': 'Number' }, { 'name': 'z3', 'description': 'z-coordinate for the second point
\n', 'type': 'Number' }, { 'name': 'x4', 'description': '', 'type': 'Number' }, { 'name': 'y4', 'description': '', 'type': 'Number' }, { 'name': 'z4', 'description': 'z-coordinate for the ending control point
\n', 'type': 'Number' } ], 'chainable': 1 } ] }, 'curveDetail': { 'name': 'curveDetail', 'params': [ { 'name': 'resolution', 'description': 'resolution of the curves
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Shape' }, 'curveTightness': { 'name': 'curveTightness', 'params': [ { 'name': 'amount', 'description': 'amount of deformation from the original vertices
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Shape' }, 'curvePoint': { 'name': 'curvePoint', 'params': [ { 'name': 'a', 'description': 'coordinate of first control point of the curve
\n', 'type': 'Number' }, { 'name': 'b', 'description': 'coordinate of first point
\n', 'type': 'Number' }, { 'name': 'c', 'description': 'coordinate of second point
\n', 'type': 'Number' }, { 'name': 'd', 'description': 'coordinate of second control point
\n', 'type': 'Number' }, { 'name': 't', 'description': 'value between 0 and 1
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Shape' }, 'curveTangent': { 'name': 'curveTangent', 'params': [ { 'name': 'a', 'description': 'coordinate of first control point
\n', 'type': 'Number' }, { 'name': 'b', 'description': 'coordinate of first point on the curve
\n', 'type': 'Number' }, { 'name': 'c', 'description': 'coordinate of second point on the curve
\n', 'type': 'Number' }, { 'name': 'd', 'description': 'coordinate of second conrol point
\n', 'type': 'Number' }, { 'name': 't', 'description': 'value between 0 and 1
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Shape' }, 'beginContour': { 'name': 'beginContour', 'class': 'p5', 'module': 'Shape' }, 'beginShape': { 'name': 'beginShape', 'params': [ { 'name': 'kind', 'description': 'either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS
\n', 'type': 'Constant', 'optional': true } ], 'class': 'p5', 'module': 'Shape' }, 'bezierVertex': { 'name': 'bezierVertex', 'class': 'p5', 'module': 'Shape', 'overloads': [ { 'params': [ { 'name': 'x2', 'description': 'x-coordinate for the first control point
\n', 'type': 'Number' }, { 'name': 'y2', 'description': 'y-coordinate for the first control point
\n', 'type': 'Number' }, { 'name': 'x3', 'description': 'x-coordinate for the second control point
\n', 'type': 'Number' }, { 'name': 'y3', 'description': 'y-coordinate for the second control point
\n', 'type': 'Number' }, { 'name': 'x4', 'description': 'x-coordinate for the anchor point
\n', 'type': 'Number' }, { 'name': 'y4', 'description': 'y-coordinate for the anchor point
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'x2', 'description': '', 'type': 'Number' }, { 'name': 'y2', 'description': '', 'type': 'Number' }, { 'name': 'z2', 'description': 'z-coordinate for the first control point (for WebGL mode)
\n', 'type': 'Number' }, { 'name': 'x3', 'description': '', 'type': 'Number' }, { 'name': 'y3', 'description': '', 'type': 'Number' }, { 'name': 'z3', 'description': 'z-coordinate for the second control point (for WebGL mode)
\n', 'type': 'Number' }, { 'name': 'x4', 'description': '', 'type': 'Number' }, { 'name': 'y4', 'description': '', 'type': 'Number' }, { 'name': 'z4', 'description': 'z-coordinate for the anchor point (for WebGL mode)
\n', 'type': 'Number' } ], 'chainable': 1 } ] }, 'curveVertex': { 'name': 'curveVertex', 'class': 'p5', 'module': 'Shape', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'x-coordinate of the vertex
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the vertex
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'x', 'description': '', 'type': 'Number' }, { 'name': 'y', 'description': '', 'type': 'Number' }, { 'name': 'z', 'description': 'z-coordinate of the vertex (for WebGL mode)
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 } ] }, 'endContour': { 'name': 'endContour', 'class': 'p5', 'module': 'Shape' }, 'endShape': { 'name': 'endShape', 'params': [ { 'name': 'mode', 'description': 'use CLOSE to close the shape
\n', 'type': 'Constant', 'optional': true }, { 'name': 'count', 'description': 'number of times you want to draw/instance the shape (for WebGL mode).
\n', 'type': 'Integer', 'optional': true } ], 'class': 'p5', 'module': 'Shape' }, 'quadraticVertex': { 'name': 'quadraticVertex', 'class': 'p5', 'module': 'Shape', 'overloads': [ { 'params': [ { 'name': 'cx', 'description': 'x-coordinate for the control point
\n', 'type': 'Number' }, { 'name': 'cy', 'description': 'y-coordinate for the control point
\n', 'type': 'Number' }, { 'name': 'x3', 'description': 'x-coordinate for the anchor point
\n', 'type': 'Number' }, { 'name': 'y3', 'description': 'y-coordinate for the anchor point
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'cx', 'description': '', 'type': 'Number' }, { 'name': 'cy', 'description': '', 'type': 'Number' }, { 'name': 'cz', 'description': 'z-coordinate for the control point (for WebGL mode)
\n', 'type': 'Number' }, { 'name': 'x3', 'description': '', 'type': 'Number' }, { 'name': 'y3', 'description': '', 'type': 'Number' }, { 'name': 'z3', 'description': 'z-coordinate for the anchor point (for WebGL mode)
\n', 'type': 'Number' } ], 'chainable': 1 } ] }, 'vertex': { 'name': 'vertex', 'class': 'p5', 'module': 'Shape', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'x-coordinate of the vertex
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the vertex
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'x', 'description': '', 'type': 'Number' }, { 'name': 'y', 'description': '', 'type': 'Number' }, { 'name': 'z', 'description': 'z-coordinate of the vertex.\n Defaults to 0 if not specified.
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'x', 'description': '', 'type': 'Number' }, { 'name': 'y', 'description': '', 'type': 'Number' }, { 'name': 'z', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'u', 'description': 'the vertex\'s texture u-coordinate
\n', 'type': 'Number', 'optional': true }, { 'name': 'v', 'description': 'the vertex\'s texture v-coordinate
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 } ] }, 'normal': { 'name': 'normal', 'class': 'p5', 'module': 'Shape', 'overloads': [ { 'params': [ { 'name': 'vector', 'description': 'A p5.Vector representing the vertex normal.
\n', 'type': 'Vector' } ], 'chainable': 1 }, { 'params': [ { 'name': 'x', 'description': 'The x component of the vertex normal.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'The y component of the vertex normal.
\n', 'type': 'Number' }, { 'name': 'z', 'description': 'The z component of the vertex normal.
\n', 'type': 'Number' } ], 'chainable': 1 } ] }, 'VERSION': { 'name': 'VERSION', 'class': 'p5', 'module': 'Constants' }, 'P2D': { 'name': 'P2D', 'class': 'p5', 'module': 'Constants' }, 'WEBGL': { 'name': 'WEBGL', 'class': 'p5', 'module': 'Constants' }, 'WEBGL2': { 'name': 'WEBGL2', 'class': 'p5', 'module': 'Constants' }, 'ARROW': { 'name': 'ARROW', 'class': 'p5', 'module': 'Constants' }, 'CROSS': { 'name': 'CROSS', 'class': 'p5', 'module': 'Constants' }, 'HAND': { 'name': 'HAND', 'class': 'p5', 'module': 'Constants' }, 'MOVE': { 'name': 'MOVE', 'class': 'p5', 'module': 'Constants' }, 'TEXT': { 'name': 'TEXT', 'class': 'p5', 'module': 'Constants' }, 'WAIT': { 'name': 'WAIT', 'class': 'p5', 'module': 'Constants' }, 'HALF_PI': { 'name': 'HALF_PI', 'class': 'p5', 'module': 'Constants' }, 'PI': { 'name': 'PI', 'class': 'p5', 'module': 'Constants' }, 'QUARTER_PI': { 'name': 'QUARTER_PI', 'class': 'p5', 'module': 'Constants' }, 'TAU': { 'name': 'TAU', 'class': 'p5', 'module': 'Constants' }, 'TWO_PI': { 'name': 'TWO_PI', 'class': 'p5', 'module': 'Constants' }, 'DEGREES': { 'name': 'DEGREES', 'class': 'p5', 'module': 'Constants' }, 'RADIANS': { 'name': 'RADIANS', 'class': 'p5', 'module': 'Constants' }, 'CORNER': { 'name': 'CORNER', 'class': 'p5', 'module': 'Constants' }, 'CORNERS': { 'name': 'CORNERS', 'class': 'p5', 'module': 'Constants' }, 'RADIUS': { 'name': 'RADIUS', 'class': 'p5', 'module': 'Constants' }, 'RIGHT': { 'name': 'RIGHT', 'class': 'p5', 'module': 'Constants' }, 'LEFT': { 'name': 'LEFT', 'class': 'p5', 'module': 'Constants' }, 'CENTER': { 'name': 'CENTER', 'class': 'p5', 'module': 'Constants' }, 'TOP': { 'name': 'TOP', 'class': 'p5', 'module': 'Constants' }, 'BOTTOM': { 'name': 'BOTTOM', 'class': 'p5', 'module': 'Constants' }, 'BASELINE': { 'name': 'BASELINE', 'class': 'p5', 'module': 'Constants' }, 'POINTS': { 'name': 'POINTS', 'class': 'p5', 'module': 'Constants' }, 'LINES': { 'name': 'LINES', 'class': 'p5', 'module': 'Constants' }, 'LINE_STRIP': { 'name': 'LINE_STRIP', 'class': 'p5', 'module': 'Constants' }, 'LINE_LOOP': { 'name': 'LINE_LOOP', 'class': 'p5', 'module': 'Constants' }, 'TRIANGLES': { 'name': 'TRIANGLES', 'class': 'p5', 'module': 'Constants' }, 'TRIANGLE_FAN': { 'name': 'TRIANGLE_FAN', 'class': 'p5', 'module': 'Constants' }, 'TRIANGLE_STRIP': { 'name': 'TRIANGLE_STRIP', 'class': 'p5', 'module': 'Constants' }, 'QUADS': { 'name': 'QUADS', 'class': 'p5', 'module': 'Constants' }, 'QUAD_STRIP': { 'name': 'QUAD_STRIP', 'class': 'p5', 'module': 'Constants' }, 'TESS': { 'name': 'TESS', 'class': 'p5', 'module': 'Constants' }, 'CLOSE': { 'name': 'CLOSE', 'class': 'p5', 'module': 'Constants' }, 'OPEN': { 'name': 'OPEN', 'class': 'p5', 'module': 'Constants' }, 'CHORD': { 'name': 'CHORD', 'class': 'p5', 'module': 'Constants' }, 'PIE': { 'name': 'PIE', 'class': 'p5', 'module': 'Constants' }, 'PROJECT': { 'name': 'PROJECT', 'class': 'p5', 'module': 'Constants' }, 'SQUARE': { 'name': 'SQUARE', 'class': 'p5', 'module': 'Constants' }, 'ROUND': { 'name': 'ROUND', 'class': 'p5', 'module': 'Constants' }, 'BEVEL': { 'name': 'BEVEL', 'class': 'p5', 'module': 'Constants' }, 'MITER': { 'name': 'MITER', 'class': 'p5', 'module': 'Constants' }, 'RGB': { 'name': 'RGB', 'class': 'p5', 'module': 'Constants' }, 'HSB': { 'name': 'HSB', 'class': 'p5', 'module': 'Constants' }, 'HSL': { 'name': 'HSL', 'class': 'p5', 'module': 'Constants' }, 'AUTO': { 'name': 'AUTO', 'class': 'p5', 'module': 'Constants' }, 'ALT': { 'name': 'ALT', 'class': 'p5', 'module': 'Constants' }, 'BACKSPACE': { 'name': 'BACKSPACE', 'class': 'p5', 'module': 'Constants' }, 'CONTROL': { 'name': 'CONTROL', 'class': 'p5', 'module': 'Constants' }, 'DELETE': { 'name': 'DELETE', 'class': 'p5', 'module': 'Constants' }, 'DOWN_ARROW': { 'name': 'DOWN_ARROW', 'class': 'p5', 'module': 'Constants' }, 'ENTER': { 'name': 'ENTER', 'class': 'p5', 'module': 'Constants' }, 'ESCAPE': { 'name': 'ESCAPE', 'class': 'p5', 'module': 'Constants' }, 'LEFT_ARROW': { 'name': 'LEFT_ARROW', 'class': 'p5', 'module': 'Constants' }, 'OPTION': { 'name': 'OPTION', 'class': 'p5', 'module': 'Constants' }, 'RETURN': { 'name': 'RETURN', 'class': 'p5', 'module': 'Constants' }, 'RIGHT_ARROW': { 'name': 'RIGHT_ARROW', 'class': 'p5', 'module': 'Constants' }, 'SHIFT': { 'name': 'SHIFT', 'class': 'p5', 'module': 'Constants' }, 'TAB': { 'name': 'TAB', 'class': 'p5', 'module': 'Constants' }, 'UP_ARROW': { 'name': 'UP_ARROW', 'class': 'p5', 'module': 'Constants' }, 'BLEND': { 'name': 'BLEND', 'class': 'p5', 'module': 'Constants' }, 'REMOVE': { 'name': 'REMOVE', 'class': 'p5', 'module': 'Constants' }, 'ADD': { 'name': 'ADD', 'class': 'p5', 'module': 'Constants' }, 'DARKEST': { 'name': 'DARKEST', 'class': 'p5', 'module': 'Constants' }, 'LIGHTEST': { 'name': 'LIGHTEST', 'class': 'p5', 'module': 'Constants' }, 'DIFFERENCE': { 'name': 'DIFFERENCE', 'class': 'p5', 'module': 'Constants' }, 'SUBTRACT': { 'name': 'SUBTRACT', 'class': 'p5', 'module': 'Constants' }, 'EXCLUSION': { 'name': 'EXCLUSION', 'class': 'p5', 'module': 'Constants' }, 'MULTIPLY': { 'name': 'MULTIPLY', 'class': 'p5', 'module': 'Constants' }, 'SCREEN': { 'name': 'SCREEN', 'class': 'p5', 'module': 'Constants' }, 'REPLACE': { 'name': 'REPLACE', 'class': 'p5', 'module': 'Constants' }, 'OVERLAY': { 'name': 'OVERLAY', 'class': 'p5', 'module': 'Constants' }, 'HARD_LIGHT': { 'name': 'HARD_LIGHT', 'class': 'p5', 'module': 'Constants' }, 'SOFT_LIGHT': { 'name': 'SOFT_LIGHT', 'class': 'p5', 'module': 'Constants' }, 'DODGE': { 'name': 'DODGE', 'class': 'p5', 'module': 'Constants' }, 'BURN': { 'name': 'BURN', 'class': 'p5', 'module': 'Constants' }, 'THRESHOLD': { 'name': 'THRESHOLD', 'class': 'p5', 'module': 'Constants' }, 'GRAY': { 'name': 'GRAY', 'class': 'p5', 'module': 'Constants' }, 'OPAQUE': { 'name': 'OPAQUE', 'class': 'p5', 'module': 'Constants' }, 'INVERT': { 'name': 'INVERT', 'class': 'p5', 'module': 'Constants' }, 'POSTERIZE': { 'name': 'POSTERIZE', 'class': 'p5', 'module': 'Constants' }, 'DILATE': { 'name': 'DILATE', 'class': 'p5', 'module': 'Constants' }, 'ERODE': { 'name': 'ERODE', 'class': 'p5', 'module': 'Constants' }, 'BLUR': { 'name': 'BLUR', 'class': 'p5', 'module': 'Constants' }, 'NORMAL': { 'name': 'NORMAL', 'class': 'p5', 'module': 'Constants' }, 'ITALIC': { 'name': 'ITALIC', 'class': 'p5', 'module': 'Constants' }, 'BOLD': { 'name': 'BOLD', 'class': 'p5', 'module': 'Constants' }, 'BOLDITALIC': { 'name': 'BOLDITALIC', 'class': 'p5', 'module': 'Constants' }, 'CHAR': { 'name': 'CHAR', 'class': 'p5', 'module': 'Constants' }, 'WORD': { 'name': 'WORD', 'class': 'p5', 'module': 'Constants' }, 'LINEAR': { 'name': 'LINEAR', 'class': 'p5', 'module': 'Constants' }, 'QUADRATIC': { 'name': 'QUADRATIC', 'class': 'p5', 'module': 'Constants' }, 'BEZIER': { 'name': 'BEZIER', 'class': 'p5', 'module': 'Constants' }, 'CURVE': { 'name': 'CURVE', 'class': 'p5', 'module': 'Constants' }, 'STROKE': { 'name': 'STROKE', 'class': 'p5', 'module': 'Constants' }, 'FILL': { 'name': 'FILL', 'class': 'p5', 'module': 'Constants' }, 'TEXTURE': { 'name': 'TEXTURE', 'class': 'p5', 'module': 'Constants' }, 'IMMEDIATE': { 'name': 'IMMEDIATE', 'class': 'p5', 'module': 'Constants' }, 'IMAGE': { 'name': 'IMAGE', 'class': 'p5', 'module': 'Constants' }, 'NEAREST': { 'name': 'NEAREST', 'class': 'p5', 'module': 'Constants' }, 'REPEAT': { 'name': 'REPEAT', 'class': 'p5', 'module': 'Constants' }, 'CLAMP': { 'name': 'CLAMP', 'class': 'p5', 'module': 'Constants' }, 'MIRROR': { 'name': 'MIRROR', 'class': 'p5', 'module': 'Constants' }, 'FLAT': { 'name': 'FLAT', 'class': 'p5', 'module': 'Constants' }, 'SMOOTH': { 'name': 'SMOOTH', 'class': 'p5', 'module': 'Constants' }, 'LANDSCAPE': { 'name': 'LANDSCAPE', 'class': 'p5', 'module': 'Constants' }, 'PORTRAIT': { 'name': 'PORTRAIT', 'class': 'p5', 'module': 'Constants' }, 'GRID': { 'name': 'GRID', 'class': 'p5', 'module': 'Constants' }, 'AXES': { 'name': 'AXES', 'class': 'p5', 'module': 'Constants' }, 'LABEL': { 'name': 'LABEL', 'class': 'p5', 'module': 'Constants' }, 'FALLBACK': { 'name': 'FALLBACK', 'class': 'p5', 'module': 'Constants' }, 'CONTAIN': { 'name': 'CONTAIN', 'class': 'p5', 'module': 'Constants' }, 'COVER': { 'name': 'COVER', 'class': 'p5', 'module': 'Constants' }, 'UNSIGNED_BYTE': { 'name': 'UNSIGNED_BYTE', 'class': 'p5', 'module': 'Constants' }, 'UNSIGNED_INT': { 'name': 'UNSIGNED_INT', 'class': 'p5', 'module': 'Constants' }, 'FLOAT': { 'name': 'FLOAT', 'class': 'p5', 'module': 'Constants' }, 'HALF_FLOAT': { 'name': 'HALF_FLOAT', 'class': 'p5', 'module': 'Constants' }, 'RGBA': { 'name': 'RGBA', 'class': 'p5', 'module': 'Constants' }, 'print': { 'name': 'print', 'params': [ { 'name': 'contents', 'description': 'content to print to the console.
\n', 'type': 'Any' } ], 'class': 'p5', 'module': 'Environment' }, 'frameCount': { 'name': 'frameCount', 'class': 'p5', 'module': 'Environment' }, 'deltaTime': { 'name': 'deltaTime', 'class': 'p5', 'module': 'Environment' }, 'focused': { 'name': 'focused', 'class': 'p5', 'module': 'Environment' }, 'cursor': { 'name': 'cursor', 'params': [ { 'name': 'type', 'description': 'Built-in: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT.\n Native CSS properties: \'grab\', \'progress\', and so on.\n Path to cursor image.
\n', 'type': 'String|Constant' }, { 'name': 'x', 'description': 'horizontal active spot of the cursor.
\n', 'type': 'Number', 'optional': true }, { 'name': 'y', 'description': 'vertical active spot of the cursor.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': 'Environment' }, 'frameRate': { 'name': 'frameRate', 'class': 'p5', 'module': 'Environment', 'overloads': [ { 'params': [ { 'name': 'fps', 'description': 'number of frames to draw per second.
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ ] } ] }, 'getTargetFrameRate': { 'name': 'getTargetFrameRate', 'class': 'p5', 'module': 'Environment' }, 'noCursor': { 'name': 'noCursor', 'class': 'p5', 'module': 'Environment' }, 'webglVersion': { 'name': 'webglVersion', 'class': 'p5', 'module': 'Environment' }, 'displayWidth': { 'name': 'displayWidth', 'class': 'p5', 'module': 'Environment' }, 'displayHeight': { 'name': 'displayHeight', 'class': 'p5', 'module': 'Environment' }, 'windowWidth': { 'name': 'windowWidth', 'class': 'p5', 'module': 'Environment' }, 'windowHeight': { 'name': 'windowHeight', 'class': 'p5', 'module': 'Environment' }, 'windowResized': { 'name': 'windowResized', 'params': [ { 'name': 'event', 'description': 'optional resize Event.
\n', 'type': 'UIEvent', 'optional': true } ], 'class': 'p5', 'module': 'Environment' }, 'width': { 'name': 'width', 'class': 'p5', 'module': 'Environment' }, 'height': { 'name': 'height', 'class': 'p5', 'module': 'Environment' }, 'fullscreen': { 'name': 'fullscreen', 'params': [ { 'name': 'val', 'description': 'whether the sketch should be in fullscreen mode.
\n', 'type': 'Boolean', 'optional': true } ], 'class': 'p5', 'module': 'Environment' }, 'pixelDensity': { 'name': 'pixelDensity', 'class': 'p5', 'module': 'Environment', 'overloads': [ { 'params': [ { 'name': 'val', 'description': 'desired pixel density.
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ ] } ] }, 'displayDensity': { 'name': 'displayDensity', 'class': 'p5', 'module': 'Environment' }, 'getURL': { 'name': 'getURL', 'class': 'p5', 'module': 'Environment' }, 'getURLPath': { 'name': 'getURLPath', 'class': 'p5', 'module': 'Environment' }, 'getURLParams': { 'name': 'getURLParams', 'class': 'p5', 'module': 'Environment' }, 'preload': { 'name': 'preload', 'class': 'p5', 'module': 'Structure' }, 'setup': { 'name': 'setup', 'class': 'p5', 'module': 'Structure' }, 'draw': { 'name': 'draw', 'class': 'p5', 'module': 'Structure' }, 'remove': { 'name': 'remove', 'class': 'p5', 'module': 'Structure' }, 'disableFriendlyErrors': { 'name': 'disableFriendlyErrors', 'class': 'p5', 'module': 'Structure' }, 'let': { 'name': 'let', 'class': 'p5', 'module': 'Foundation' }, 'const': { 'name': 'const', 'class': 'p5', 'module': 'Foundation' }, '===': { 'name': '===', 'class': 'p5', 'module': 'Foundation' }, '>': { 'name': '>', 'class': 'p5', 'module': 'Foundation' }, '>=': { 'name': '>=', 'class': 'p5', 'module': 'Foundation' }, '<': { 'name': '<', 'class': 'p5', 'module': 'Foundation' }, '<=': { 'name': '<=', 'class': 'p5', 'module': 'Foundation' }, 'if-else': { 'name': 'if-else', 'class': 'p5', 'module': 'Foundation' }, 'function': { 'name': 'function', 'class': 'p5', 'module': 'Foundation' }, 'return': { 'name': 'return', 'class': 'p5', 'module': 'Foundation' }, 'boolean': { 'name': 'boolean', 'params': [ { 'name': 'n', 'description': 'value to parse
\n', 'type': 'String|Boolean|Number|Array' } ], 'class': 'p5', 'module': 'Data' }, 'string': { 'name': 'string', 'class': 'p5', 'module': 'Foundation' }, 'number': { 'name': 'number', 'class': 'p5', 'module': 'Foundation' }, 'object': { 'name': 'object', 'class': 'p5', 'module': 'Foundation' }, 'class': { 'name': 'class', 'class': 'p5', 'module': 'Foundation' }, 'for': { 'name': 'for', 'class': 'p5', 'module': 'Foundation' }, 'while': { 'name': 'while', 'class': 'p5', 'module': 'Foundation' }, 'createCanvas': { 'name': 'createCanvas', 'class': 'p5', 'module': 'Rendering', 'overloads': [ { 'params': [ { 'name': 'w', 'description': 'width of the canvas
\n', 'type': 'Number' }, { 'name': 'h', 'description': 'height of the canvas
\n', 'type': 'Number' }, { 'name': 'renderer', 'description': 'either P2D or WEBGL
\n', 'type': 'Constant', 'optional': true }, { 'name': 'canvas', 'description': 'existing html canvas element
\n', 'type': 'HTMLCanvasElement', 'optional': true } ] }, { 'params': [ { 'name': 'w', 'description': '', 'type': 'Number' }, { 'name': 'h', 'description': '', 'type': 'Number' }, { 'name': 'canvas', 'description': '', 'type': 'HTMLCanvasElement', 'optional': true } ] } ] }, 'resizeCanvas': { 'name': 'resizeCanvas', 'params': [ { 'name': 'w', 'description': 'width of the canvas
\n', 'type': 'Number' }, { 'name': 'h', 'description': 'height of the canvas
\n', 'type': 'Number' }, { 'name': 'noRedraw', 'description': 'don\'t redraw the canvas immediately
\n', 'type': 'Boolean', 'optional': true } ], 'class': 'p5', 'module': 'Rendering' }, 'noCanvas': { 'name': 'noCanvas', 'class': 'p5', 'module': 'Rendering' }, 'createGraphics': { 'name': 'createGraphics', 'class': 'p5', 'module': 'Rendering', 'overloads': [ { 'params': [ { 'name': 'w', 'description': 'width of the offscreen graphics buffer
\n', 'type': 'Number' }, { 'name': 'h', 'description': 'height of the offscreen graphics buffer
\n', 'type': 'Number' }, { 'name': 'renderer', 'description': 'either P2D or WEBGL\n undefined defaults to p2d
\n', 'type': 'Constant', 'optional': true }, { 'name': 'canvas', 'description': 'existing html canvas element
\n', 'type': 'HTMLCanvasElement', 'optional': true } ] }, { 'params': [ { 'name': 'w', 'description': '', 'type': 'Number' }, { 'name': 'h', 'description': '', 'type': 'Number' }, { 'name': 'canvas', 'description': '', 'type': 'HTMLCanvasElement', 'optional': true } ] } ] }, 'createFramebuffer': { 'name': 'createFramebuffer', 'params': [ { 'name': 'options', 'description': 'An optional object with configuration
\n', 'type': 'Object', 'optional': true } ], 'class': 'p5', 'module': 'Rendering' }, 'clearDepth': { 'name': 'clearDepth', 'params': [ { 'name': 'depth', 'description': 'The value, between 0 and 1, to reset the depth to, where\n0 corresponds to a value as close as possible to the camera before getting\nclipped, and 1 corresponds to a value as far away from the camera as possible.\nThe default value is 1.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': 'Rendering' }, 'blendMode': { 'name': 'blendMode', 'params': [ { 'name': 'mode', 'description': 'blend mode to set for canvas.\n either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT
\n', 'type': 'Constant' } ], 'class': 'p5', 'module': 'Rendering' }, 'drawingContext': { 'name': 'drawingContext', 'class': 'p5', 'module': 'Rendering' }, 'noLoop': { 'name': 'noLoop', 'class': 'p5', 'module': 'Structure' }, 'loop': { 'name': 'loop', 'class': 'p5', 'module': 'Structure' }, 'isLooping': { 'name': 'isLooping', 'class': 'p5', 'module': 'Structure' }, 'push': { 'name': 'push', 'class': 'p5', 'module': 'Structure' }, 'pop': { 'name': 'pop', 'class': 'p5', 'module': 'Structure' }, 'redraw': { 'name': 'redraw', 'params': [ { 'name': 'n', 'description': 'Redraw for n-times. The default value is 1.
\n', 'type': 'Integer', 'optional': true } ], 'class': 'p5', 'module': 'Structure' }, 'p5': { 'name': 'p5', 'params': [ { 'name': 'sketch', 'description': 'a function containing a p5.js sketch
\n', 'type': 'Object' }, { 'name': 'node', 'description': 'ID or pointer to HTML DOM node to contain sketch in
\n', 'type': 'String|Object' } ], 'class': 'p5', 'module': 'Structure' }, 'applyMatrix': { 'name': 'applyMatrix', 'class': 'p5', 'module': 'Transform', 'overloads': [ { 'params': [ { 'name': 'arr', 'description': 'an array of numbers - should be 6 or 16 length (2×3 or 4×4 matrix values)
\n', 'type': 'Array' } ], 'chainable': 1 }, { 'params': [ { 'name': 'a', 'description': 'numbers which define the 2×3 or 4×4 matrix to be multiplied
\n', 'type': 'Number' }, { 'name': 'b', 'description': 'numbers which define the 2×3 or 4×4 matrix to be multiplied
\n', 'type': 'Number' }, { 'name': 'c', 'description': 'numbers which define the 2×3 or 4×4 matrix to be multiplied
\n', 'type': 'Number' }, { 'name': 'd', 'description': 'numbers which define the 2×3 or 4×4 matrix to be multiplied
\n', 'type': 'Number' }, { 'name': 'e', 'description': 'numbers which define the 2×3 or 4×4 matrix to be multiplied
\n', 'type': 'Number' }, { 'name': 'f', 'description': 'numbers which define the 2×3 or 4×4 matrix to be multiplied
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'a', 'description': '', 'type': 'Number' }, { 'name': 'b', 'description': '', 'type': 'Number' }, { 'name': 'c', 'description': '', 'type': 'Number' }, { 'name': 'd', 'description': '', 'type': 'Number' }, { 'name': 'e', 'description': '', 'type': 'Number' }, { 'name': 'f', 'description': '', 'type': 'Number' }, { 'name': 'g', 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', 'type': 'Number' }, { 'name': 'h', 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', 'type': 'Number' }, { 'name': 'i', 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', 'type': 'Number' }, { 'name': 'j', 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', 'type': 'Number' }, { 'name': 'k', 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', 'type': 'Number' }, { 'name': 'l', 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', 'type': 'Number' }, { 'name': 'm', 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', 'type': 'Number' }, { 'name': 'n', 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', 'type': 'Number' }, { 'name': 'o', 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', 'type': 'Number' }, { 'name': 'p', 'description': 'numbers which define the 4×4 matrix to be multiplied
\n', 'type': 'Number' } ], 'chainable': 1 } ] }, 'resetMatrix': { 'name': 'resetMatrix', 'class': 'p5', 'module': 'Transform' }, 'rotate': { 'name': 'rotate', 'params': [ { 'name': 'angle', 'description': 'the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n', 'type': 'Number' }, { 'name': 'axis', 'description': '(in 3d) the axis to rotate around
\n', 'type': 'p5.Vector|Number[]', 'optional': true } ], 'class': 'p5', 'module': 'Transform' }, 'rotateX': { 'name': 'rotateX', 'params': [ { 'name': 'angle', 'description': 'the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Transform' }, 'rotateY': { 'name': 'rotateY', 'params': [ { 'name': 'angle', 'description': 'the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Transform' }, 'rotateZ': { 'name': 'rotateZ', 'params': [ { 'name': 'angle', 'description': 'the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Transform' }, 'scale': { 'name': 'scale', 'class': 'p5', 'module': 'Transform', 'overloads': [ { 'params': [ { 'name': 's', 'description': 'percent to scale the object, or percentage to\n scale the object in the x-axis if multiple arguments\n are given
\n', 'type': 'Number|p5.Vector|Number[]' }, { 'name': 'y', 'description': 'percent to scale the object in the y-axis
\n', 'type': 'Number', 'optional': true }, { 'name': 'z', 'description': 'percent to scale the object in the z-axis (webgl only)
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'scales', 'description': 'per-axis percents to scale the object
\n', 'type': 'p5.Vector|Number[]' } ], 'chainable': 1 } ] }, 'shearX': { 'name': 'shearX', 'params': [ { 'name': 'angle', 'description': 'angle of shear specified in radians or degrees,\n depending on current angleMode
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Transform' }, 'shearY': { 'name': 'shearY', 'params': [ { 'name': 'angle', 'description': 'angle of shear specified in radians or degrees,\n depending on current angleMode
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Transform' }, 'translate': { 'name': 'translate', 'class': 'p5', 'module': 'Transform', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'left/right translation
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'up/down translation
\n', 'type': 'Number' }, { 'name': 'z', 'description': 'forward/backward translation (WEBGL only)
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'vector', 'description': 'the vector to translate by
\n', 'type': 'p5.Vector' } ], 'chainable': 1 } ] }, 'storeItem': { 'name': 'storeItem', 'params': [ { 'name': 'key', 'description': '', 'type': 'String' }, { 'name': 'value', 'description': '', 'type': 'String|Number|Object|Boolean|p5.Color|p5.Vector' } ], 'class': 'p5', 'module': 'Data' }, 'getItem': { 'name': 'getItem', 'params': [ { 'name': 'key', 'description': 'name that you wish to use to store in local storage
\n', 'type': 'String' } ], 'class': 'p5', 'module': 'Data' }, 'clearStorage': { 'name': 'clearStorage', 'class': 'p5', 'module': 'Data' }, 'removeItem': { 'name': 'removeItem', 'params': [ { 'name': 'key', 'description': '', 'type': 'String' } ], 'class': 'p5', 'module': 'Data' }, 'createStringDict': { 'name': 'createStringDict', 'class': 'p5', 'module': 'Data', 'overloads': [ { 'params': [ { 'name': 'key', 'description': '', 'type': 'String' }, { 'name': 'value', 'description': '', 'type': 'String' } ] }, { 'params': [ { 'name': 'object', 'description': 'object
\n', 'type': 'Object' } ] } ] }, 'createNumberDict': { 'name': 'createNumberDict', 'class': 'p5', 'module': 'Data', 'overloads': [ { 'params': [ { 'name': 'key', 'description': '', 'type': 'Number' }, { 'name': 'value', 'description': '', 'type': 'Number' } ] }, { 'params': [ { 'name': 'object', 'description': 'object
\n', 'type': 'Object' } ] } ] }, 'select': { 'name': 'select', 'params': [ { 'name': 'selectors', 'description': 'CSS selector string of element to search for.
\n', 'type': 'String' }, { 'name': 'container', 'description': 'CSS selector string, p5.Element, or\n HTMLElement to search within.
\n', 'type': 'String|p5.Element|HTMLElement', 'optional': true } ], 'class': 'p5', 'module': 'DOM' }, 'selectAll': { 'name': 'selectAll', 'params': [ { 'name': 'selectors', 'description': 'CSS selector string of element to search for.
\n', 'type': 'String' }, { 'name': 'container', 'description': 'CSS selector string, p5.Element, or\n HTMLElement to search within.
\n', 'type': 'String|p5.Element|HTMLElement', 'optional': true } ], 'class': 'p5', 'module': 'DOM' }, 'removeElements': { 'name': 'removeElements', 'class': 'p5', 'module': 'DOM' }, 'changed': { 'name': 'changed', 'params': [ { 'name': 'fxn', 'description': 'function to call when the element changes.\n false disables the function.
function to call when input is detected within\n the element.\n false disables the function.
inner HTML for the new <div></div> element.
inner HTML for the new <p></p> element.
inner HTML for the new <span></span> element.
relative path or URL for the image.
\n', 'type': 'String' }, { 'name': 'alt', 'description': 'alternate text for the image.
\n', 'type': 'String' } ] }, { 'params': [ { 'name': 'src', 'description': '', 'type': 'String' }, { 'name': 'alt', 'description': '', 'type': 'String' }, { 'name': 'crossOrigin', 'description': 'crossOrigin property to use when fetching the image.
\n', 'type': 'String', 'optional': true }, { 'name': 'successCallback', 'description': 'function to call once the image loads. The new image will be passed\n to the function as a p5.Element object.
\n', 'type': 'Function', 'optional': true } ] } ] }, 'createA': { 'name': 'createA', 'params': [ { 'name': 'href', 'description': 'URL of linked page.
\n', 'type': 'String' }, { 'name': 'html', 'description': 'inner HTML of link element to display.
\n', 'type': 'String' }, { 'name': 'target', 'description': 'target where the new link should open,\n either \'_blank\', \'_self\', \'_parent\', or \'_top\'.
minimum value of the slider.
\n', 'type': 'Number' }, { 'name': 'max', 'description': 'maximum value of the slider.
\n', 'type': 'Number' }, { 'name': 'value', 'description': 'default value of the slider.
\n', 'type': 'Number', 'optional': true }, { 'name': 'step', 'description': 'size for each step in the slider\'s range.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': 'DOM' }, 'createButton': { 'name': 'createButton', 'params': [ { 'name': 'label', 'description': 'label displayed on the button.
\n', 'type': 'String' }, { 'name': 'value', 'description': 'value of the button.
\n', 'type': 'String', 'optional': true } ], 'class': 'p5', 'module': 'DOM' }, 'createCheckbox': { 'name': 'createCheckbox', 'params': [ { 'name': 'label', 'description': 'label displayed after the checkbox.
\n', 'type': 'String', 'optional': true }, { 'name': 'value', 'description': 'value of the checkbox. Checked is true and unchecked is false.
support multiple selections.
\n', 'type': 'Boolean', 'optional': true } ] }, { 'params': [ { 'name': 'existing', 'description': 'select element to wrap, either as a p5.Element or\n a HTMLSelectElement.
\n', 'type': 'Object' } ] } ] }, 'createRadio': { 'name': 'createRadio', 'class': 'p5', 'module': 'DOM', 'overloads': [ { 'params': [ { 'name': 'containerElement', 'description': 'container HTML Element, either a <div></div>\nor <span></span>.
name parameter assigned to each option\'s <input></input> element.
default color as a CSS color string.
\n', 'type': 'String|p5.Color', 'optional': true } ], 'class': 'p5', 'module': 'DOM' }, 'createInput': { 'name': 'createInput', 'class': 'p5', 'module': 'DOM', 'overloads': [ { 'params': [ { 'name': 'value', 'description': 'default value of the input box. Defaults to an empty string \'\'.
type of input. Defaults to \'text\'.
function to call once the file loads.
\n', 'type': 'Function' }, { 'name': 'multiple', 'description': 'allow multiple files to be selected.
\n', 'type': 'Boolean', 'optional': true } ], 'class': 'p5', 'module': 'DOM' }, 'createVideo': { 'name': 'createVideo', 'params': [ { 'name': 'src', 'description': 'path to a video file, or an array of paths for\n supporting different browsers.
\n', 'type': 'String|String[]' }, { 'name': 'callback', 'description': 'function to call once the video is ready to play.
\n', 'type': 'Function', 'optional': true } ], 'class': 'p5', 'module': 'DOM' }, 'createAudio': { 'name': 'createAudio', 'params': [ { 'name': 'src', 'description': 'path to an audio file, or an array of paths\n for supporting different browsers.
\n', 'type': 'String|String[]', 'optional': true }, { 'name': 'callback', 'description': 'function to call once the audio is ready to play.
\n', 'type': 'Function', 'optional': true } ], 'class': 'p5', 'module': 'DOM' }, 'createCapture': { 'name': 'createCapture', 'params': [ { 'name': 'type', 'description': 'type of capture, either AUDIO or VIDEO,\n or a constraints object. Both video and audio\n audio streams are captured by default.
\n', 'type': 'String|Constant|Object', 'optional': true }, { 'name': 'flipped', 'description': 'flip the capturing video and mirror the output with {flipped:true}. By\n default it is false.
function to call once the stream\n has loaded.
\n', 'type': 'Function', 'optional': true } ], 'class': 'p5', 'module': 'DOM' }, 'createElement': { 'name': 'createElement', 'params': [ { 'name': 'tag', 'description': 'tag for the new element.
\n', 'type': 'String' }, { 'name': 'content', 'description': 'HTML content to insert into the element.
\n', 'type': 'String', 'optional': true } ], 'class': 'p5', 'module': 'DOM' }, 'deviceOrientation': { 'name': 'deviceOrientation', 'class': 'p5', 'module': 'Events' }, 'accelerationX': { 'name': 'accelerationX', 'class': 'p5', 'module': 'Events' }, 'accelerationY': { 'name': 'accelerationY', 'class': 'p5', 'module': 'Events' }, 'accelerationZ': { 'name': 'accelerationZ', 'class': 'p5', 'module': 'Events' }, 'pAccelerationX': { 'name': 'pAccelerationX', 'class': 'p5', 'module': 'Events' }, 'pAccelerationY': { 'name': 'pAccelerationY', 'class': 'p5', 'module': 'Events' }, 'pAccelerationZ': { 'name': 'pAccelerationZ', 'class': 'p5', 'module': 'Events' }, 'rotationX': { 'name': 'rotationX', 'class': 'p5', 'module': 'Events' }, 'rotationY': { 'name': 'rotationY', 'class': 'p5', 'module': 'Events' }, 'rotationZ': { 'name': 'rotationZ', 'class': 'p5', 'module': 'Events' }, 'pRotationX': { 'name': 'pRotationX', 'class': 'p5', 'module': 'Events' }, 'pRotationY': { 'name': 'pRotationY', 'class': 'p5', 'module': 'Events' }, 'pRotationZ': { 'name': 'pRotationZ', 'class': 'p5', 'module': 'Events' }, 'turnAxis': { 'name': 'turnAxis', 'class': 'p5', 'module': 'Events' }, 'setMoveThreshold': { 'name': 'setMoveThreshold', 'params': [ { 'name': 'value', 'description': 'The threshold value
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Events' }, 'setShakeThreshold': { 'name': 'setShakeThreshold', 'params': [ { 'name': 'value', 'description': 'The threshold value
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Events' }, 'deviceMoved': { 'name': 'deviceMoved', 'class': 'p5', 'module': 'Events' }, 'deviceTurned': { 'name': 'deviceTurned', 'class': 'p5', 'module': 'Events' }, 'deviceShaken': { 'name': 'deviceShaken', 'class': 'p5', 'module': 'Events' }, 'keyIsPressed': { 'name': 'keyIsPressed', 'class': 'p5', 'module': 'Events' }, 'key': { 'name': 'key', 'class': 'p5', 'module': 'Events' }, 'keyCode': { 'name': 'keyCode', 'class': 'p5', 'module': 'Events' }, 'keyPressed': { 'name': 'keyPressed', 'params': [ { 'name': 'event', 'description': 'optional KeyboardEvent callback argument.
\n', 'type': 'KeyboardEvent', 'optional': true } ], 'class': 'p5', 'module': 'Events' }, 'keyReleased': { 'name': 'keyReleased', 'params': [ { 'name': 'event', 'description': 'optional KeyboardEvent callback argument.
\n', 'type': 'KeyboardEvent', 'optional': true } ], 'class': 'p5', 'module': 'Events' }, 'keyTyped': { 'name': 'keyTyped', 'params': [ { 'name': 'event', 'description': 'optional KeyboardEvent callback argument.
\n', 'type': 'KeyboardEvent', 'optional': true } ], 'class': 'p5', 'module': 'Events' }, 'keyIsDown': { 'name': 'keyIsDown', 'params': [ { 'name': 'code', 'description': 'The key to check for.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Events' }, 'movedX': { 'name': 'movedX', 'class': 'p5', 'module': 'Events' }, 'movedY': { 'name': 'movedY', 'class': 'p5', 'module': 'Events' }, 'mouseX': { 'name': 'mouseX', 'class': 'p5', 'module': 'Events' }, 'mouseY': { 'name': 'mouseY', 'class': 'p5', 'module': 'Events' }, 'pmouseX': { 'name': 'pmouseX', 'class': 'p5', 'module': 'Events' }, 'pmouseY': { 'name': 'pmouseY', 'class': 'p5', 'module': 'Events' }, 'winMouseX': { 'name': 'winMouseX', 'class': 'p5', 'module': 'Events' }, 'winMouseY': { 'name': 'winMouseY', 'class': 'p5', 'module': 'Events' }, 'pwinMouseX': { 'name': 'pwinMouseX', 'class': 'p5', 'module': 'Events' }, 'pwinMouseY': { 'name': 'pwinMouseY', 'class': 'p5', 'module': 'Events' }, 'mouseButton': { 'name': 'mouseButton', 'class': 'p5', 'module': 'Events' }, 'mouseIsPressed': { 'name': 'mouseIsPressed', 'class': 'p5', 'module': 'Events' }, 'mouseMoved': { 'name': 'mouseMoved', 'params': [ { 'name': 'event', 'description': 'optional MouseEvent callback argument.
\n', 'type': 'MouseEvent', 'optional': true } ], 'class': 'p5', 'module': 'Events' }, 'mouseDragged': { 'name': 'mouseDragged', 'params': [ { 'name': 'event', 'description': 'optional MouseEvent callback argument.
\n', 'type': 'MouseEvent', 'optional': true } ], 'class': 'p5', 'module': 'Events' }, 'mousePressed': { 'name': 'mousePressed', 'params': [ { 'name': 'event', 'description': 'optional MouseEvent callback argument.
\n', 'type': 'MouseEvent', 'optional': true } ], 'class': 'p5', 'module': 'Events' }, 'mouseReleased': { 'name': 'mouseReleased', 'params': [ { 'name': 'event', 'description': 'optional MouseEvent callback argument.
\n', 'type': 'MouseEvent', 'optional': true } ], 'class': 'p5', 'module': 'Events' }, 'mouseClicked': { 'name': 'mouseClicked', 'params': [ { 'name': 'event', 'description': 'optional MouseEvent callback argument.
\n', 'type': 'MouseEvent', 'optional': true } ], 'class': 'p5', 'module': 'Events' }, 'doubleClicked': { 'name': 'doubleClicked', 'params': [ { 'name': 'event', 'description': 'optional MouseEvent callback argument.
\n', 'type': 'MouseEvent', 'optional': true } ], 'class': 'p5', 'module': 'Events' }, 'mouseWheel': { 'name': 'mouseWheel', 'params': [ { 'name': 'event', 'description': 'optional WheelEvent callback argument.
\n', 'type': 'WheelEvent', 'optional': true } ], 'class': 'p5', 'module': 'Events' }, 'requestPointerLock': { 'name': 'requestPointerLock', 'class': 'p5', 'module': 'Events' }, 'exitPointerLock': { 'name': 'exitPointerLock', 'class': 'p5', 'module': 'Events' }, 'touches': { 'name': 'touches', 'class': 'p5', 'module': 'Events' }, 'touchStarted': { 'name': 'touchStarted', 'params': [ { 'name': 'event', 'description': 'optional TouchEvent callback argument.
\n', 'type': 'TouchEvent', 'optional': true } ], 'class': 'p5', 'module': 'Events' }, 'touchMoved': { 'name': 'touchMoved', 'params': [ { 'name': 'event', 'description': 'optional TouchEvent callback argument.
\n', 'type': 'TouchEvent', 'optional': true } ], 'class': 'p5', 'module': 'Events' }, 'touchEnded': { 'name': 'touchEnded', 'params': [ { 'name': 'event', 'description': 'optional TouchEvent callback argument.
\n', 'type': 'TouchEvent', 'optional': true } ], 'class': 'p5', 'module': 'Events' }, 'createImage': { 'name': 'createImage', 'params': [ { 'name': 'width', 'description': 'width in pixels.
\n', 'type': 'Integer' }, { 'name': 'height', 'description': 'height in pixels.
\n', 'type': 'Integer' } ], 'class': 'p5', 'module': 'Image' }, 'saveCanvas': { 'name': 'saveCanvas', 'class': 'p5', 'module': 'Image', 'overloads': [ { 'params': [ { 'name': 'selectedCanvas', 'description': 'reference to a\n specific HTML5 canvas element.
\n', 'type': 'p5.Framebuffer|p5.Element|HTMLCanvasElement' }, { 'name': 'filename', 'description': 'file name. Defaults to \'untitled\'.
\n', 'type': 'String', 'optional': true }, { 'name': 'extension', 'description': 'file extension, either \'jpg\' or \'png\'. Defaults to \'png\'.
\n', 'type': 'String', 'optional': true } ] }, { 'params': [ { 'name': 'filename', 'description': '', 'type': 'String', 'optional': true }, { 'name': 'extension', 'description': '', 'type': 'String', 'optional': true } ] } ] }, 'saveFrames': { 'name': 'saveFrames', 'params': [ { 'name': 'filename', 'description': 'prefix of file name.
\n', 'type': 'String' }, { 'name': 'extension', 'description': 'file extension, either \'jpg\' or \'png\'.
\n', 'type': 'String' }, { 'name': 'duration', 'description': 'duration in seconds to record. This parameter will be constrained to be less or equal to 15.
\n', 'type': 'Number' }, { 'name': 'framerate', 'description': 'number of frames to save per second. This parameter will be constrained to be less or equal to 22.
\n', 'type': 'Number' }, { 'name': 'callback', 'description': 'callback function that will be executed\n to handle the image data. This function\n should accept an array as argument. The\n array will contain the specified number of\n frames of objects. Each object has three\n properties: imageData, filename, and extension.
path of the image to be loaded or base64 encoded image.
\n', 'type': 'String' }, { 'name': 'successCallback', 'description': 'function called with\n p5.Image once it\n loads.
\n', 'type': 'function(p5.Image)', 'optional': true }, { 'name': 'failureCallback', 'description': 'function called with event\n error if the image fails to load.
\n', 'type': 'Function(Event)', 'optional': true } ], 'class': 'p5', 'module': 'Image' }, 'saveGif': { 'name': 'saveGif', 'params': [ { 'name': 'filename', 'description': 'file name of gif.
\n', 'type': 'String' }, { 'name': 'duration', 'description': 'duration in seconds to capture from the sketch.
\n', 'type': 'Number' }, { 'name': 'options', 'description': 'an object that can contain five more properties:\n delay, a Number specifying how much time to wait before recording;\n units, a String that can be either \'seconds\' or \'frames\'. By default it\'s \'seconds’;\n silent, a Boolean that defines presence of progress notifications. By default it’s false;\n notificationDuration, a Number that defines how long in seconds the final notification\n will live. By default it\'s 0, meaning the notification will never be removed;\n notificationID, a String that specifies the id of the notification\'s DOM element. By default it’s \'progressBar’.
image to display.
\n', 'type': 'p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture' }, { 'name': 'x', 'description': 'x-coordinate of the top-left corner of the image.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the top-left corner of the image.
\n', 'type': 'Number' }, { 'name': 'width', 'description': 'width to draw the image.
\n', 'type': 'Number', 'optional': true }, { 'name': 'height', 'description': 'height to draw the image.
\n', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'img', 'description': '', 'type': 'p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture' }, { 'name': 'dx', 'description': 'the x-coordinate of the destination\n rectangle in which to draw the source image
\n', 'type': 'Number' }, { 'name': 'dy', 'description': 'the y-coordinate of the destination\n rectangle in which to draw the source image
\n', 'type': 'Number' }, { 'name': 'dWidth', 'description': 'the width of the destination rectangle
\n', 'type': 'Number' }, { 'name': 'dHeight', 'description': 'the height of the destination rectangle
\n', 'type': 'Number' }, { 'name': 'sx', 'description': 'the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n', 'type': 'Number' }, { 'name': 'sy', 'description': 'the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n', 'type': 'Number' }, { 'name': 'sWidth', 'description': 'the width of the subsection of the\n source image to draw into the destination\n rectangle
\n', 'type': 'Number', 'optional': true }, { 'name': 'sHeight', 'description': 'the height of the subsection of the\n source image to draw into the destination rectangle
\n', 'type': 'Number', 'optional': true }, { 'name': 'fit', 'description': 'either CONTAIN or COVER
\n', 'type': 'Constant', 'optional': true }, { 'name': 'xAlign', 'description': 'either LEFT, RIGHT or CENTER default is CENTER
\n', 'type': 'Constant', 'optional': true }, { 'name': 'yAlign', 'description': 'either TOP, BOTTOM or CENTER default is CENTER
\n', 'type': 'Constant', 'optional': true } ] } ] }, 'tint': { 'name': 'tint', 'class': 'p5', 'module': 'Image', 'overloads': [ { 'params': [ { 'name': 'v1', 'description': 'red or hue value.
\n', 'type': 'Number' }, { 'name': 'v2', 'description': 'green or saturation value.
\n', 'type': 'Number' }, { 'name': 'v3', 'description': 'blue or brightness.
\n', 'type': 'Number' }, { 'name': 'alpha', 'description': '', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'value', 'description': 'CSS color string.
\n', 'type': 'String' } ] }, { 'params': [ { 'name': 'gray', 'description': 'grayscale value.
\n', 'type': 'Number' }, { 'name': 'alpha', 'description': '', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'values', 'description': 'array containing the red, green, blue &\n alpha components of the color.
\n', 'type': 'Number[]' } ] }, { 'params': [ { 'name': 'color', 'description': 'the tint color
\n', 'type': 'p5.Color' } ] } ] }, 'noTint': { 'name': 'noTint', 'class': 'p5', 'module': 'Image' }, 'imageMode': { 'name': 'imageMode', 'params': [ { 'name': 'mode', 'description': 'either CORNER, CORNERS, or CENTER.
\n', 'type': 'Constant' } ], 'class': 'p5', 'module': 'Image' }, 'pixels': { 'name': 'pixels', 'class': 'p5', 'module': 'Image' }, 'blend': { 'name': 'blend', 'class': 'p5', 'module': 'Image', 'overloads': [ { 'params': [ { 'name': 'srcImage', 'description': 'source image.
\n', 'type': 'p5.Image' }, { 'name': 'sx', 'description': 'x-coordinate of the source\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'sy', 'description': 'y-coordinate of the source\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'sw', 'description': 'source image width.
\n', 'type': 'Integer' }, { 'name': 'sh', 'description': 'source image height.
\n', 'type': 'Integer' }, { 'name': 'dx', 'description': 'x-coordinate of the destination\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'dy', 'description': 'y-coordinate of the destination\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'dw', 'description': 'destination image width.
\n', 'type': 'Integer' }, { 'name': 'dh', 'description': 'destination image height.
\n', 'type': 'Integer' }, { 'name': 'blendMode', 'description': 'the blend mode. either\n BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
\n', 'type': 'Constant' } ] }, { 'params': [ { 'name': 'sx', 'description': '', 'type': 'Integer' }, { 'name': 'sy', 'description': '', 'type': 'Integer' }, { 'name': 'sw', 'description': '', 'type': 'Integer' }, { 'name': 'sh', 'description': '', 'type': 'Integer' }, { 'name': 'dx', 'description': '', 'type': 'Integer' }, { 'name': 'dy', 'description': '', 'type': 'Integer' }, { 'name': 'dw', 'description': '', 'type': 'Integer' }, { 'name': 'dh', 'description': '', 'type': 'Integer' }, { 'name': 'blendMode', 'description': '', 'type': 'Constant' } ] } ] }, 'copy': { 'name': 'copy', 'class': 'p5', 'module': 'Image', 'overloads': [ { 'params': [ { 'name': 'srcImage', 'description': 'source image.
\n', 'type': 'p5.Image|p5.Element' }, { 'name': 'sx', 'description': 'x-coordinate of the source\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'sy', 'description': 'y-coordinate of the source\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'sw', 'description': 'source image width.
\n', 'type': 'Integer' }, { 'name': 'sh', 'description': 'source image height.
\n', 'type': 'Integer' }, { 'name': 'dx', 'description': 'x-coordinate of the destination\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'dy', 'description': 'y-coordinate of the destination\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'dw', 'description': 'destination image width.
\n', 'type': 'Integer' }, { 'name': 'dh', 'description': 'destination image height.
\n', 'type': 'Integer' } ] }, { 'params': [ { 'name': 'sx', 'description': '', 'type': 'Integer' }, { 'name': 'sy', 'description': '', 'type': 'Integer' }, { 'name': 'sw', 'description': '', 'type': 'Integer' }, { 'name': 'sh', 'description': '', 'type': 'Integer' }, { 'name': 'dx', 'description': '', 'type': 'Integer' }, { 'name': 'dy', 'description': '', 'type': 'Integer' }, { 'name': 'dw', 'description': '', 'type': 'Integer' }, { 'name': 'dh', 'description': '', 'type': 'Integer' } ] } ] }, 'filter': { 'name': 'filter', 'class': 'p5', 'module': 'Image', 'overloads': [ { 'params': [ { 'name': 'filterType', 'description': 'either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, BLUR, ERODE, DILATE or BLUR.
\n', 'type': 'Constant' }, { 'name': 'filterParam', 'description': 'parameter unique to each filter.
\n', 'type': 'Number', 'optional': true }, { 'name': 'useWebGL', 'description': 'flag to control whether to use fast\n WebGL filters (GPU) or original image\n filters (CPU); defaults to true.
shader that\'s been loaded, with the\n frag shader using a tex0 uniform.
x-coordinate of the pixel.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the pixel.
\n', 'type': 'Number' }, { 'name': 'w', 'description': 'width of the subsection to be returned.
\n', 'type': 'Number' }, { 'name': 'h', 'description': 'height of the subsection to be returned.
\n', 'type': 'Number' } ] }, { 'params': [ ] }, { 'params': [ { 'name': 'x', 'description': '', 'type': 'Number' }, { 'name': 'y', 'description': '', 'type': 'Number' } ] } ] }, 'loadPixels': { 'name': 'loadPixels', 'class': 'p5', 'module': 'Image' }, 'set': { 'name': 'set', 'params': [ { 'name': 'x', 'description': 'x-coordinate of the pixel.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the pixel.
\n', 'type': 'Number' }, { 'name': 'c', 'description': 'grayscale value | pixel array |\n p5.Color object | p5.Image to copy.
\n', 'type': 'Number|Number[]|Object' } ], 'class': 'p5', 'module': 'Image' }, 'updatePixels': { 'name': 'updatePixels', 'params': [ { 'name': 'x', 'description': 'x-coordinate of the upper-left corner of region\n to update.
\n', 'type': 'Number', 'optional': true }, { 'name': 'y', 'description': 'y-coordinate of the upper-left corner of region\n to update.
\n', 'type': 'Number', 'optional': true }, { 'name': 'w', 'description': 'width of region to update.
\n', 'type': 'Number', 'optional': true }, { 'name': 'h', 'description': 'height of region to update.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': 'Image' }, 'loadJSON': { 'name': 'loadJSON', 'class': 'p5', 'module': 'IO', 'overloads': [ { 'params': [ { 'name': 'path', 'description': 'name of the file or url to load
\n', 'type': 'String' }, { 'name': 'jsonpOptions', 'description': 'options object for jsonp related settings
\n', 'type': 'Object', 'optional': true }, { 'name': 'datatype', 'description': '"json" or "jsonp"
\n', 'type': 'String', 'optional': true }, { 'name': 'callback', 'description': 'function to be executed after\n loadJSON() completes, data is passed\n in as first argument
\n', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': 'function to be executed if\n there is an error, response is passed\n in as first argument
\n', 'type': 'Function', 'optional': true } ] }, { 'params': [ { 'name': 'path', 'description': '', 'type': 'String' }, { 'name': 'datatype', 'description': '', 'type': 'String' }, { 'name': 'callback', 'description': '', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': '', 'type': 'Function', 'optional': true } ] }, { 'params': [ { 'name': 'path', 'description': '', 'type': 'String' }, { 'name': 'callback', 'description': '', 'type': 'Function' }, { 'name': 'errorCallback', 'description': '', 'type': 'Function', 'optional': true } ] } ] }, 'loadStrings': { 'name': 'loadStrings', 'params': [ { 'name': 'filename', 'description': 'name of the file or url to load
\n', 'type': 'String' }, { 'name': 'callback', 'description': 'function to be executed after loadStrings()\n completes, Array is passed in as first\n argument
\n', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': 'function to be executed if\n there is an error, response is passed\n in as first argument
\n', 'type': 'Function', 'optional': true } ], 'class': 'p5', 'module': 'IO' }, 'loadTable': { 'name': 'loadTable', 'params': [ { 'name': 'filename', 'description': 'name of the file or URL to load
\n', 'type': 'String' }, { 'name': 'extension', 'description': 'parse the table by comma-separated values "csv", semicolon-separated\n values "ssv", or tab-separated values "tsv"
\n', 'type': 'String', 'optional': true }, { 'name': 'header', 'description': '"header" to indicate table has header row
\n', 'type': 'String', 'optional': true }, { 'name': 'callback', 'description': 'function to be executed after\n loadTable() completes. On success, the\n Table object is passed in as the\n first argument.
\n', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': 'function to be executed if\n there is an error, response is passed\n in as first argument
\n', 'type': 'Function', 'optional': true } ], 'class': 'p5', 'module': 'IO' }, 'loadXML': { 'name': 'loadXML', 'params': [ { 'name': 'filename', 'description': 'name of the file or URL to load
\n', 'type': 'String' }, { 'name': 'callback', 'description': 'function to be executed after loadXML()\n completes, XML object is passed in as\n first argument
\n', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': 'function to be executed if\n there is an error, response is passed\n in as first argument
\n', 'type': 'Function', 'optional': true } ], 'class': 'p5', 'module': 'IO' }, 'loadBytes': { 'name': 'loadBytes', 'params': [ { 'name': 'file', 'description': 'name of the file or URL to load
\n', 'type': 'String' }, { 'name': 'callback', 'description': 'function to be executed after loadBytes()\n completes
\n', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': 'function to be executed if there\n is an error
\n', 'type': 'Function', 'optional': true } ], 'class': 'p5', 'module': 'IO' }, 'httpGet': { 'name': 'httpGet', 'class': 'p5', 'module': 'IO', 'overloads': [ { 'params': [ { 'name': 'path', 'description': 'name of the file or url to load
\n', 'type': 'String' }, { 'name': 'datatype', 'description': '"json", "jsonp", "binary", "arrayBuffer",\n "xml", or "text"
\n', 'type': 'String', 'optional': true }, { 'name': 'data', 'description': 'param data passed sent with request
\n', 'type': 'Object|Boolean', 'optional': true }, { 'name': 'callback', 'description': 'function to be executed after\n httpGet() completes, data is passed in\n as first argument
\n', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': 'function to be executed if\n there is an error, response is passed\n in as first argument
\n', 'type': 'Function', 'optional': true } ] }, { 'params': [ { 'name': 'path', 'description': '', 'type': 'String' }, { 'name': 'data', 'description': '', 'type': 'Object|Boolean' }, { 'name': 'callback', 'description': '', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': '', 'type': 'Function', 'optional': true } ] }, { 'params': [ { 'name': 'path', 'description': '', 'type': 'String' }, { 'name': 'callback', 'description': '', 'type': 'Function' }, { 'name': 'errorCallback', 'description': '', 'type': 'Function', 'optional': true } ] } ] }, 'httpPost': { 'name': 'httpPost', 'class': 'p5', 'module': 'IO', 'overloads': [ { 'params': [ { 'name': 'path', 'description': 'name of the file or url to load
\n', 'type': 'String' }, { 'name': 'datatype', 'description': '"json", "jsonp", "xml", or "text".\n If omitted, httpPost() will guess.
\n', 'type': 'String', 'optional': true }, { 'name': 'data', 'description': 'param data passed sent with request
\n', 'type': 'Object|Boolean', 'optional': true }, { 'name': 'callback', 'description': 'function to be executed after\n httpPost() completes, data is passed in\n as first argument
\n', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': 'function to be executed if\n there is an error, response is passed\n in as first argument
\n', 'type': 'Function', 'optional': true } ] }, { 'params': [ { 'name': 'path', 'description': '', 'type': 'String' }, { 'name': 'data', 'description': '', 'type': 'Object|Boolean' }, { 'name': 'callback', 'description': '', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': '', 'type': 'Function', 'optional': true } ] }, { 'params': [ { 'name': 'path', 'description': '', 'type': 'String' }, { 'name': 'callback', 'description': '', 'type': 'Function' }, { 'name': 'errorCallback', 'description': '', 'type': 'Function', 'optional': true } ] } ] }, 'httpDo': { 'name': 'httpDo', 'class': 'p5', 'module': 'IO', 'overloads': [ { 'params': [ { 'name': 'path', 'description': 'name of the file or url to load
\n', 'type': 'String' }, { 'name': 'method', 'description': 'either "GET", "POST", or "PUT",\n defaults to "GET"
\n', 'type': 'String', 'optional': true }, { 'name': 'datatype', 'description': '"json", "jsonp", "xml", or "text"
\n', 'type': 'String', 'optional': true }, { 'name': 'data', 'description': 'param data passed sent with request
\n', 'type': 'Object', 'optional': true }, { 'name': 'callback', 'description': 'function to be executed after\n httpGet() completes, data is passed in\n as first argument
\n', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': 'function to be executed if\n there is an error, response is passed\n in as first argument
\n', 'type': 'Function', 'optional': true } ] }, { 'params': [ { 'name': 'path', 'description': '', 'type': 'String' }, { 'name': 'options', 'description': 'Request object options as documented in the\n "fetch" API\nreference
\n', 'type': 'Object' }, { 'name': 'callback', 'description': '', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': '', 'type': 'Function', 'optional': true } ] } ] }, 'createWriter': { 'name': 'createWriter', 'params': [ { 'name': 'name', 'description': 'name of the file to be created
\n', 'type': 'String' }, { 'name': 'extension', 'description': '', 'type': 'String', 'optional': true } ], 'class': 'p5', 'module': 'IO' }, 'save': { 'name': 'save', 'params': [ { 'name': 'objectOrFilename', 'description': 'If filename is provided, will\n save canvas as an image with\n either png or jpg extension\n depending on the filename.\n If object is provided, will\n save depending on the object\n and filename (see examples\n above).
\n', 'type': 'Object|String', 'optional': true }, { 'name': 'filename', 'description': 'If an object is provided as the first\n parameter, then the second parameter\n indicates the filename,\n and should include an appropriate\n file extension (see examples above).
\n', 'type': 'String', 'optional': true }, { 'name': 'options', 'description': 'Additional options depend on\n filetype. For example, when saving JSON,\n true indicates that the\n output will be optimized for filesize,\n rather than readability.
If true, removes line breaks\n and spaces from the output\n file to optimize filesize\n (but not readability).
\n', 'type': 'Boolean', 'optional': true } ], 'class': 'p5', 'module': 'IO' }, 'saveStrings': { 'name': 'saveStrings', 'params': [ { 'name': 'list', 'description': 'string array to be written
\n', 'type': 'String[]' }, { 'name': 'filename', 'description': 'filename for output
\n', 'type': 'String' }, { 'name': 'extension', 'description': 'the filename\'s extension
\n', 'type': 'String', 'optional': true }, { 'name': 'isCRLF', 'description': 'if true, change line-break to CRLF
\n', 'type': 'Boolean', 'optional': true } ], 'class': 'p5', 'module': 'IO' }, 'saveTable': { 'name': 'saveTable', 'params': [ { 'name': 'Table', 'description': 'the Table object to save to a file
\n', 'type': 'p5.Table' }, { 'name': 'filename', 'description': 'the filename to which the Table should be saved
\n', 'type': 'String' }, { 'name': 'options', 'description': 'can be one of "tsv", "csv", or "html"
\n', 'type': 'String', 'optional': true } ], 'class': 'p5', 'module': 'IO' }, 'abs': { 'name': 'abs', 'params': [ { 'name': 'n', 'description': 'number to compute.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'ceil': { 'name': 'ceil', 'params': [ { 'name': 'n', 'description': 'number to round up.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'constrain': { 'name': 'constrain', 'params': [ { 'name': 'n', 'description': 'number to constrain.
\n', 'type': 'Number' }, { 'name': 'low', 'description': 'minimum limit.
\n', 'type': 'Number' }, { 'name': 'high', 'description': 'maximum limit.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'dist': { 'name': 'dist', 'class': 'p5', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'x1', 'description': 'x-coordinate of the first point.
\n', 'type': 'Number' }, { 'name': 'y1', 'description': 'y-coordinate of the first point.
\n', 'type': 'Number' }, { 'name': 'x2', 'description': 'x-coordinate of the second point.
\n', 'type': 'Number' }, { 'name': 'y2', 'description': 'y-coordinate of the second point.
\n', 'type': 'Number' } ] }, { 'params': [ { 'name': 'x1', 'description': '', 'type': 'Number' }, { 'name': 'y1', 'description': '', 'type': 'Number' }, { 'name': 'z1', 'description': 'z-coordinate of the first point.
\n', 'type': 'Number' }, { 'name': 'x2', 'description': '', 'type': 'Number' }, { 'name': 'y2', 'description': '', 'type': 'Number' }, { 'name': 'z2', 'description': 'z-coordinate of the second point.
\n', 'type': 'Number' } ] } ] }, 'exp': { 'name': 'exp', 'params': [ { 'name': 'n', 'description': 'exponent to raise.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'floor': { 'name': 'floor', 'params': [ { 'name': 'n', 'description': 'number to round down.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'lerp': { 'name': 'lerp', 'params': [ { 'name': 'start', 'description': 'first value.
\n', 'type': 'Number' }, { 'name': 'stop', 'description': 'second value.
\n', 'type': 'Number' }, { 'name': 'amt', 'description': 'number.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'log': { 'name': 'log', 'params': [ { 'name': 'n', 'description': 'number greater than 0.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'mag': { 'name': 'mag', 'params': [ { 'name': 'x', 'description': 'first component.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'second component.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'map': { 'name': 'map', 'params': [ { 'name': 'value', 'description': 'the incoming value to be converted.
\n', 'type': 'Number' }, { 'name': 'start1', 'description': 'lower bound of the value\'s current range.
\n', 'type': 'Number' }, { 'name': 'stop1', 'description': 'upper bound of the value\'s current range.
\n', 'type': 'Number' }, { 'name': 'start2', 'description': 'lower bound of the value\'s target range.
\n', 'type': 'Number' }, { 'name': 'stop2', 'description': 'upper bound of the value\'s target range.
\n', 'type': 'Number' }, { 'name': 'withinBounds', 'description': 'constrain the value to the newly mapped range.
\n', 'type': 'Boolean', 'optional': true } ], 'class': 'p5', 'module': 'Math' }, 'max': { 'name': 'max', 'class': 'p5', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'n0', 'description': 'first number to compare.
\n', 'type': 'Number' }, { 'name': 'n1', 'description': 'second number to compare.
\n', 'type': 'Number' } ] }, { 'params': [ { 'name': 'nums', 'description': 'numbers to compare.
\n', 'type': 'Number[]' } ] } ] }, 'min': { 'name': 'min', 'class': 'p5', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'n0', 'description': 'first number to compare.
\n', 'type': 'Number' }, { 'name': 'n1', 'description': 'second number to compare.
\n', 'type': 'Number' } ] }, { 'params': [ { 'name': 'nums', 'description': 'numbers to compare.
\n', 'type': 'Number[]' } ] } ] }, 'norm': { 'name': 'norm', 'params': [ { 'name': 'value', 'description': 'incoming value to be normalized.
\n', 'type': 'Number' }, { 'name': 'start', 'description': 'lower bound of the value\'s current range.
\n', 'type': 'Number' }, { 'name': 'stop', 'description': 'upper bound of the value\'s current range.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'pow': { 'name': 'pow', 'params': [ { 'name': 'n', 'description': 'base of the exponential expression.
\n', 'type': 'Number' }, { 'name': 'e', 'description': 'power by which to raise the base.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'round': { 'name': 'round', 'params': [ { 'name': 'n', 'description': 'number to round.
\n', 'type': 'Number' }, { 'name': 'decimals', 'description': 'number of decimal places to round to, default is 0.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': 'Math' }, 'sq': { 'name': 'sq', 'params': [ { 'name': 'n', 'description': 'number to square.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'sqrt': { 'name': 'sqrt', 'params': [ { 'name': 'n', 'description': 'non-negative number to square root.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'fract': { 'name': 'fract', 'params': [ { 'name': 'n', 'description': 'number whose fractional part will be found.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'createVector': { 'name': 'createVector', 'params': [ { 'name': 'x', 'description': 'x component of the vector.
\n', 'type': 'Number', 'optional': true }, { 'name': 'y', 'description': 'y component of the vector.
\n', 'type': 'Number', 'optional': true }, { 'name': 'z', 'description': 'z component of the vector.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': 'Math' }, 'noise': { 'name': 'noise', 'params': [ { 'name': 'x', 'description': 'x-coordinate in noise space.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate in noise space.
\n', 'type': 'Number', 'optional': true }, { 'name': 'z', 'description': 'z-coordinate in noise space.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': 'Math' }, 'noiseDetail': { 'name': 'noiseDetail', 'params': [ { 'name': 'lod', 'description': 'number of octaves to be used by the noise.
\n', 'type': 'Number' }, { 'name': 'falloff', 'description': 'falloff factor for each octave.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'noiseSeed': { 'name': 'noiseSeed', 'params': [ { 'name': 'seed', 'description': 'seed value.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'randomSeed': { 'name': 'randomSeed', 'params': [ { 'name': 'seed', 'description': 'seed value.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'random': { 'name': 'random', 'class': 'p5', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'min', 'description': 'lower bound (inclusive).
\n', 'type': 'Number', 'optional': true }, { 'name': 'max', 'description': 'upper bound (exclusive).
\n', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'choices', 'description': 'array to choose from.
\n', 'type': 'Array' } ] } ] }, 'randomGaussian': { 'name': 'randomGaussian', 'params': [ { 'name': 'mean', 'description': 'mean.
\n', 'type': 'Number', 'optional': true }, { 'name': 'sd', 'description': 'standard deviation.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': 'Math' }, 'acos': { 'name': 'acos', 'params': [ { 'name': 'value', 'description': 'value whose arc cosine is to be returned.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'asin': { 'name': 'asin', 'params': [ { 'name': 'value', 'description': 'value whose arc sine is to be returned.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'atan': { 'name': 'atan', 'params': [ { 'name': 'value', 'description': 'value whose arc tangent is to be returned.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'atan2': { 'name': 'atan2', 'params': [ { 'name': 'y', 'description': 'y-coordinate of the point.
\n', 'type': 'Number' }, { 'name': 'x', 'description': 'x-coordinate of the point.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'cos': { 'name': 'cos', 'params': [ { 'name': 'angle', 'description': 'the angle.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'sin': { 'name': 'sin', 'params': [ { 'name': 'angle', 'description': 'the angle.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'tan': { 'name': 'tan', 'params': [ { 'name': 'angle', 'description': 'the angle.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'degrees': { 'name': 'degrees', 'params': [ { 'name': 'radians', 'description': 'radians value to convert to degrees.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'radians': { 'name': 'radians', 'params': [ { 'name': 'degrees', 'description': 'degree value to convert to radians.
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'Math' }, 'angleMode': { 'name': 'angleMode', 'class': 'p5', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'mode', 'description': 'either RADIANS or DEGREES.
\n', 'type': 'Constant' } ] }, { 'params': [ ] } ] }, 'textAlign': { 'name': 'textAlign', 'class': 'p5', 'module': 'Typography', 'overloads': [ { 'params': [ { 'name': 'horizAlign', 'description': 'horizontal alignment, either LEFT,\n CENTER, or RIGHT.
\n', 'type': 'Constant' }, { 'name': 'vertAlign', 'description': 'vertical alignment, either TOP,\n BOTTOM, CENTER, or BASELINE.
\n', 'type': 'Constant', 'optional': true } ], 'chainable': 1 }, { 'params': [ ] } ] }, 'textLeading': { 'name': 'textLeading', 'class': 'p5', 'module': 'Typography', 'overloads': [ { 'params': [ { 'name': 'leading', 'description': 'spacing between lines of text in units of pixels.
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ ] } ] }, 'textSize': { 'name': 'textSize', 'class': 'p5', 'module': 'Typography', 'overloads': [ { 'params': [ { 'name': 'size', 'description': 'size of the letters in units of pixels
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ ] } ] }, 'textStyle': { 'name': 'textStyle', 'class': 'p5', 'module': 'Typography', 'overloads': [ { 'params': [ { 'name': 'style', 'description': 'styling for text, either NORMAL,\n ITALIC, BOLD or BOLDITALIC
\n', 'type': 'Constant' } ], 'chainable': 1 }, { 'params': [ ] } ] }, 'textWidth': { 'name': 'textWidth', 'params': [ { 'name': 'str', 'description': 'string of text to measure.
\n', 'type': 'String' } ], 'class': 'p5', 'module': 'Typography' }, 'textAscent': { 'name': 'textAscent', 'class': 'p5', 'module': 'Typography' }, 'textDescent': { 'name': 'textDescent', 'class': 'p5', 'module': 'Typography' }, 'textWrap': { 'name': 'textWrap', 'params': [ { 'name': 'style', 'description': 'text wrapping style, either WORD or CHAR.
\n', 'type': 'Constant' } ], 'class': 'p5', 'module': 'Typography' }, 'loadFont': { 'name': 'loadFont', 'params': [ { 'name': 'path', 'description': 'path of the font to be loaded.
\n', 'type': 'String' }, { 'name': 'successCallback', 'description': 'function called with the\n p5.Font object after it\n loads.
\n', 'type': 'Function', 'optional': true }, { 'name': 'failureCallback', 'description': 'function called with the error\n Event\n object if the font fails to load.
\n', 'type': 'Function', 'optional': true } ], 'class': 'p5', 'module': 'Typography' }, 'text': { 'name': 'text', 'params': [ { 'name': 'str', 'description': 'text to be displayed.
\n', 'type': 'String|Object|Array|Number|Boolean' }, { 'name': 'x', 'description': 'x-coordinate of the text box.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the text box.
\n', 'type': 'Number' }, { 'name': 'maxWidth', 'description': 'maximum width of the text box. See\n rectMode() for\n other options.
\n', 'type': 'Number', 'optional': true }, { 'name': 'maxHeight', 'description': 'maximum height of the text box. See\n rectMode() for\n other options.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': 'Typography' }, 'textFont': { 'name': 'textFont', 'class': 'p5', 'module': 'Typography', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'font', 'description': 'font as a p5.Font object or a string.
\n', 'type': 'Object|String' }, { 'name': 'size', 'description': 'font size in pixels.
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 } ] }, 'append': { 'name': 'append', 'params': [ { 'name': 'array', 'description': 'Array to append
\n', 'type': 'Array' }, { 'name': 'value', 'description': 'to be added to the Array
\n', 'type': 'Any' } ], 'class': 'p5', 'module': 'Data' }, 'arrayCopy': { 'name': 'arrayCopy', 'class': 'p5', 'module': 'Data', 'overloads': [ { 'params': [ { 'name': 'src', 'description': 'the source Array
\n', 'type': 'Array' }, { 'name': 'srcPosition', 'description': 'starting position in the source Array
\n', 'type': 'Integer' }, { 'name': 'dst', 'description': 'the destination Array
\n', 'type': 'Array' }, { 'name': 'dstPosition', 'description': 'starting position in the destination Array
\n', 'type': 'Integer' }, { 'name': 'length', 'description': 'number of Array elements to be copied
\n', 'type': 'Integer' } ] }, { 'params': [ { 'name': 'src', 'description': '', 'type': 'Array' }, { 'name': 'dst', 'description': '', 'type': 'Array' }, { 'name': 'length', 'description': '', 'type': 'Integer', 'optional': true } ] } ] }, 'concat': { 'name': 'concat', 'params': [ { 'name': 'a', 'description': 'first Array to concatenate
\n', 'type': 'Array' }, { 'name': 'b', 'description': 'second Array to concatenate
\n', 'type': 'Array' } ], 'class': 'p5', 'module': 'Data' }, 'reverse': { 'name': 'reverse', 'params': [ { 'name': 'list', 'description': 'Array to reverse
\n', 'type': 'Array' } ], 'class': 'p5', 'module': 'Data' }, 'shorten': { 'name': 'shorten', 'params': [ { 'name': 'list', 'description': 'Array to shorten
\n', 'type': 'Array' } ], 'class': 'p5', 'module': 'Data' }, 'shuffle': { 'name': 'shuffle', 'params': [ { 'name': 'array', 'description': 'Array to shuffle
\n', 'type': 'Array' }, { 'name': 'bool', 'description': 'modify passed array
\n', 'type': 'Boolean', 'optional': true } ], 'class': 'p5', 'module': 'Data' }, 'sort': { 'name': 'sort', 'params': [ { 'name': 'list', 'description': 'Array to sort
\n', 'type': 'Array' }, { 'name': 'count', 'description': 'number of elements to sort, starting from 0
\n', 'type': 'Integer', 'optional': true } ], 'class': 'p5', 'module': 'Data' }, 'splice': { 'name': 'splice', 'params': [ { 'name': 'list', 'description': 'Array to splice into
\n', 'type': 'Array' }, { 'name': 'value', 'description': 'value to be spliced in
\n', 'type': 'Any' }, { 'name': 'position', 'description': 'in the array from which to insert data
\n', 'type': 'Integer' } ], 'class': 'p5', 'module': 'Data' }, 'subset': { 'name': 'subset', 'params': [ { 'name': 'list', 'description': 'Array to extract from
\n', 'type': 'Array' }, { 'name': 'start', 'description': 'position to begin
\n', 'type': 'Integer' }, { 'name': 'count', 'description': 'number of values to extract
\n', 'type': 'Integer', 'optional': true } ], 'class': 'p5', 'module': 'Data' }, 'float': { 'name': 'float', 'params': [ { 'name': 'str', 'description': 'float string to parse
\n', 'type': 'String' } ], 'class': 'p5', 'module': 'Data' }, 'int': { 'name': 'int', 'class': 'p5', 'module': 'Data', 'overloads': [ { 'params': [ { 'name': 'n', 'description': 'value to parse
\n', 'type': 'String|Boolean|Number' }, { 'name': 'radix', 'description': 'the radix to convert to (default: 10)
\n', 'type': 'Integer', 'optional': true } ] }, { 'params': [ { 'name': 'ns', 'description': 'values to parse
\n', 'type': 'Array' }, { 'name': 'radix', 'description': '', 'type': 'Integer', 'optional': true } ] } ] }, 'str': { 'name': 'str', 'params': [ { 'name': 'n', 'description': 'value to parse
\n', 'type': 'String|Boolean|Number|Array' } ], 'class': 'p5', 'module': 'Data' }, 'byte': { 'name': 'byte', 'class': 'p5', 'module': 'Data', 'overloads': [ { 'params': [ { 'name': 'n', 'description': 'value to parse
\n', 'type': 'String|Boolean|Number' } ] }, { 'params': [ { 'name': 'ns', 'description': 'values to parse
\n', 'type': 'Array' } ] } ] }, 'char': { 'name': 'char', 'class': 'p5', 'module': 'Data', 'overloads': [ { 'params': [ { 'name': 'n', 'description': 'value to parse
\n', 'type': 'String|Number' } ] }, { 'params': [ { 'name': 'ns', 'description': 'values to parse
\n', 'type': 'Array' } ] } ] }, 'unchar': { 'name': 'unchar', 'class': 'p5', 'module': 'Data', 'overloads': [ { 'params': [ { 'name': 'n', 'description': 'value to parse
\n', 'type': 'String' } ] }, { 'params': [ { 'name': 'ns', 'description': 'values to parse
\n', 'type': 'Array' } ] } ] }, 'hex': { 'name': 'hex', 'class': 'p5', 'module': 'Data', 'overloads': [ { 'params': [ { 'name': 'n', 'description': 'value to parse
\n', 'type': 'Number' }, { 'name': 'digits', 'description': '', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'ns', 'description': 'array of values to parse
\n', 'type': 'Number[]' }, { 'name': 'digits', 'description': '', 'type': 'Number', 'optional': true } ] } ] }, 'unhex': { 'name': 'unhex', 'class': 'p5', 'module': 'Data', 'overloads': [ { 'params': [ { 'name': 'n', 'description': 'value to parse
\n', 'type': 'String' } ] }, { 'params': [ { 'name': 'ns', 'description': 'values to parse
\n', 'type': 'Array' } ] } ] }, 'join': { 'name': 'join', 'params': [ { 'name': 'list', 'description': 'array of Strings to be joined
\n', 'type': 'Array' }, { 'name': 'separator', 'description': 'String to be placed between each item
\n', 'type': 'String' } ], 'class': 'p5', 'module': 'Data' }, 'match': { 'name': 'match', 'params': [ { 'name': 'str', 'description': 'the String to be searched
\n', 'type': 'String' }, { 'name': 'regexp', 'description': 'the regexp to be used for matching
\n', 'type': 'String' } ], 'class': 'p5', 'module': 'Data' }, 'matchAll': { 'name': 'matchAll', 'params': [ { 'name': 'str', 'description': 'the String to be searched
\n', 'type': 'String' }, { 'name': 'regexp', 'description': 'the regexp to be used for matching
\n', 'type': 'String' } ], 'class': 'p5', 'module': 'Data' }, 'nf': { 'name': 'nf', 'class': 'p5', 'module': 'Data', 'overloads': [ { 'params': [ { 'name': 'num', 'description': 'the Number to format
\n', 'type': 'Number|String' }, { 'name': 'left', 'description': 'number of digits to the left of the\n decimal point
\n', 'type': 'Integer|String', 'optional': true }, { 'name': 'right', 'description': 'number of digits to the right of the\n decimal point
\n', 'type': 'Integer|String', 'optional': true } ] }, { 'params': [ { 'name': 'nums', 'description': 'the Numbers to format
\n', 'type': 'Array' }, { 'name': 'left', 'description': '', 'type': 'Integer|String', 'optional': true }, { 'name': 'right', 'description': '', 'type': 'Integer|String', 'optional': true } ] } ] }, 'nfc': { 'name': 'nfc', 'class': 'p5', 'module': 'Data', 'overloads': [ { 'params': [ { 'name': 'num', 'description': 'the Number to format
\n', 'type': 'Number|String' }, { 'name': 'right', 'description': 'number of digits to the right of the\n decimal point
\n', 'type': 'Integer|String', 'optional': true } ] }, { 'params': [ { 'name': 'nums', 'description': 'the Numbers to format
\n', 'type': 'Array' }, { 'name': 'right', 'description': '', 'type': 'Integer|String', 'optional': true } ] } ] }, 'nfp': { 'name': 'nfp', 'class': 'p5', 'module': 'Data', 'overloads': [ { 'params': [ { 'name': 'num', 'description': 'the Number to format
\n', 'type': 'Number' }, { 'name': 'left', 'description': 'number of digits to the left of the decimal\n point
\n', 'type': 'Integer', 'optional': true }, { 'name': 'right', 'description': 'number of digits to the right of the\n decimal point
\n', 'type': 'Integer', 'optional': true } ] }, { 'params': [ { 'name': 'nums', 'description': 'the Numbers to format
\n', 'type': 'Number[]' }, { 'name': 'left', 'description': '', 'type': 'Integer', 'optional': true }, { 'name': 'right', 'description': '', 'type': 'Integer', 'optional': true } ] } ] }, 'nfs': { 'name': 'nfs', 'class': 'p5', 'module': 'Data', 'overloads': [ { 'params': [ { 'name': 'num', 'description': 'the Number to format
\n', 'type': 'Number' }, { 'name': 'left', 'description': 'number of digits to the left of the decimal\n point
\n', 'type': 'Integer', 'optional': true }, { 'name': 'right', 'description': 'number of digits to the right of the\n decimal point
\n', 'type': 'Integer', 'optional': true } ] }, { 'params': [ { 'name': 'nums', 'description': 'the Numbers to format
\n', 'type': 'Array' }, { 'name': 'left', 'description': '', 'type': 'Integer', 'optional': true }, { 'name': 'right', 'description': '', 'type': 'Integer', 'optional': true } ] } ] }, 'split': { 'name': 'split', 'params': [ { 'name': 'value', 'description': 'the String to be split
\n', 'type': 'String' }, { 'name': 'delim', 'description': 'the String used to separate the data
\n', 'type': 'String' } ], 'class': 'p5', 'module': 'Data' }, 'splitTokens': { 'name': 'splitTokens', 'params': [ { 'name': 'value', 'description': 'the String to be split
\n', 'type': 'String' }, { 'name': 'delim', 'description': 'list of individual Strings that will be used as\n separators
\n', 'type': 'String', 'optional': true } ], 'class': 'p5', 'module': 'Data' }, 'trim': { 'name': 'trim', 'class': 'p5', 'module': 'Data', 'overloads': [ { 'params': [ { 'name': 'str', 'description': 'a String to be trimmed
\n', 'type': 'String' } ] }, { 'params': [ { 'name': 'strs', 'description': 'an Array of Strings to be trimmed
\n', 'type': 'Array' } ] } ] }, 'day': { 'name': 'day', 'class': 'p5', 'module': 'IO' }, 'hour': { 'name': 'hour', 'class': 'p5', 'module': 'IO' }, 'minute': { 'name': 'minute', 'class': 'p5', 'module': 'IO' }, 'millis': { 'name': 'millis', 'class': 'p5', 'module': 'IO' }, 'month': { 'name': 'month', 'class': 'p5', 'module': 'IO' }, 'second': { 'name': 'second', 'class': 'p5', 'module': 'IO' }, 'year': { 'name': 'year', 'class': 'p5', 'module': 'IO' }, 'beginGeometry': { 'name': 'beginGeometry', 'class': 'p5', 'module': 'Shape' }, 'endGeometry': { 'name': 'endGeometry', 'class': 'p5', 'module': 'Shape' }, 'buildGeometry': { 'name': 'buildGeometry', 'params': [ { 'name': 'callback', 'description': 'A function that draws shapes.
\n', 'type': 'Function' } ], 'class': 'p5', 'module': 'Shape' }, 'freeGeometry': { 'name': 'freeGeometry', 'params': [ { 'name': 'geometry', 'description': 'The geometry whose resources should be freed
\n', 'type': 'p5.Geometry' } ], 'class': 'p5', 'module': 'Shape' }, 'plane': { 'name': 'plane', 'params': [ { 'name': 'width', 'description': 'width of the plane
\n', 'type': 'Number', 'optional': true }, { 'name': 'height', 'description': 'height of the plane
\n', 'type': 'Number', 'optional': true }, { 'name': 'detailX', 'description': 'Optional number of triangle\n subdivisions in x-dimension
\n', 'type': 'Integer', 'optional': true }, { 'name': 'detailY', 'description': 'Optional number of triangle\n subdivisions in y-dimension
\n', 'type': 'Integer', 'optional': true } ], 'class': 'p5', 'module': 'Shape' }, 'box': { 'name': 'box', 'params': [ { 'name': 'width', 'description': 'width of the box
\n', 'type': 'Number', 'optional': true }, { 'name': 'height', 'description': 'height of the box
\n', 'type': 'Number', 'optional': true }, { 'name': 'depth', 'description': 'depth of the box
\n', 'type': 'Number', 'optional': true }, { 'name': 'detailX', 'description': 'Optional number of triangle\n subdivisions in x-dimension
\n', 'type': 'Integer', 'optional': true }, { 'name': 'detailY', 'description': 'Optional number of triangle\n subdivisions in y-dimension
\n', 'type': 'Integer', 'optional': true } ], 'class': 'p5', 'module': 'Shape' }, 'sphere': { 'name': 'sphere', 'params': [ { 'name': 'radius', 'description': 'radius of circle
\n', 'type': 'Number', 'optional': true }, { 'name': 'detailX', 'description': 'optional number of subdivisions in x-dimension
\n', 'type': 'Integer', 'optional': true }, { 'name': 'detailY', 'description': 'optional number of subdivisions in y-dimension
\n', 'type': 'Integer', 'optional': true } ], 'class': 'p5', 'module': 'Shape' }, 'cylinder': { 'name': 'cylinder', 'params': [ { 'name': 'radius', 'description': 'radius of the surface
\n', 'type': 'Number', 'optional': true }, { 'name': 'height', 'description': 'height of the cylinder
\n', 'type': 'Number', 'optional': true }, { 'name': 'detailX', 'description': 'number of subdivisions in x-dimension;\n default is 24
\n', 'type': 'Integer', 'optional': true }, { 'name': 'detailY', 'description': 'number of subdivisions in y-dimension;\n default is 1
\n', 'type': 'Integer', 'optional': true }, { 'name': 'bottomCap', 'description': 'whether to draw the bottom of the cylinder
\n', 'type': 'Boolean', 'optional': true }, { 'name': 'topCap', 'description': 'whether to draw the top of the cylinder
\n', 'type': 'Boolean', 'optional': true } ], 'class': 'p5', 'module': 'Shape' }, 'cone': { 'name': 'cone', 'params': [ { 'name': 'radius', 'description': 'radius of the bottom surface
\n', 'type': 'Number', 'optional': true }, { 'name': 'height', 'description': 'height of the cone
\n', 'type': 'Number', 'optional': true }, { 'name': 'detailX', 'description': 'number of segments,\n the more segments the smoother geometry\n default is 24
\n', 'type': 'Integer', 'optional': true }, { 'name': 'detailY', 'description': 'number of segments,\n the more segments the smoother geometry\n default is 1
\n', 'type': 'Integer', 'optional': true }, { 'name': 'cap', 'description': 'whether to draw the base of the cone
\n', 'type': 'Boolean', 'optional': true } ], 'class': 'p5', 'module': 'Shape' }, 'ellipsoid': { 'name': 'ellipsoid', 'params': [ { 'name': 'radiusx', 'description': 'x-radius of ellipsoid
\n', 'type': 'Number', 'optional': true }, { 'name': 'radiusy', 'description': 'y-radius of ellipsoid
\n', 'type': 'Number', 'optional': true }, { 'name': 'radiusz', 'description': 'z-radius of ellipsoid
\n', 'type': 'Number', 'optional': true }, { 'name': 'detailX', 'description': 'number of segments,\n the more segments the smoother geometry\n default is 24. Avoid detail number above\n 150, it may crash the browser.
\n', 'type': 'Integer', 'optional': true }, { 'name': 'detailY', 'description': 'number of segments,\n the more segments the smoother geometry\n default is 16. Avoid detail number above\n 150, it may crash the browser.
\n', 'type': 'Integer', 'optional': true } ], 'class': 'p5', 'module': 'Shape' }, 'torus': { 'name': 'torus', 'params': [ { 'name': 'radius', 'description': 'radius of the whole ring
\n', 'type': 'Number', 'optional': true }, { 'name': 'tubeRadius', 'description': 'radius of the tube
\n', 'type': 'Number', 'optional': true }, { 'name': 'detailX', 'description': 'number of segments in x-dimension,\n the more segments the smoother geometry\n default is 24
\n', 'type': 'Integer', 'optional': true }, { 'name': 'detailY', 'description': 'number of segments in y-dimension,\n the more segments the smoother geometry\n default is 16
\n', 'type': 'Integer', 'optional': true } ], 'class': 'p5', 'module': 'Shape' }, 'orbitControl': { 'name': 'orbitControl', 'params': [ { 'name': 'sensitivityX', 'description': 'sensitivity to mouse movement along X axis
\n', 'type': 'Number', 'optional': true }, { 'name': 'sensitivityY', 'description': 'sensitivity to mouse movement along Y axis
\n', 'type': 'Number', 'optional': true }, { 'name': 'sensitivityZ', 'description': 'sensitivity to scroll movement along Z axis
\n', 'type': 'Number', 'optional': true }, { 'name': 'options', 'description': 'An optional object that can contain additional settings,\ndisableTouchActions - Boolean, default value is true.\nSetting this to true makes mobile interactions smoother by preventing\naccidental interactions with the page while orbiting. But if you\'re already\ndoing it via css or want the default touch actions, consider setting it to false.\nfreeRotation - Boolean, default value is false.\nBy default, horizontal movement of the mouse or touch pointer rotates the camera\naround the y-axis, and vertical movement rotates the camera around the x-axis.\nBut if setting this option to true, the camera always rotates in the direction\nthe pointer is moving. For zoom and move, the behavior is the same regardless of\ntrue/false.
\n', 'type': 'Object', 'optional': true } ], 'class': 'p5', 'module': '3D' }, 'debugMode': { 'name': 'debugMode', 'class': 'p5', 'module': '3D', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'mode', 'description': 'either GRID or AXES
\n', 'type': 'Constant' } ] }, { 'params': [ { 'name': 'mode', 'description': '', 'type': 'Constant' }, { 'name': 'gridSize', 'description': 'size of one side of the grid
\n', 'type': 'Number', 'optional': true }, { 'name': 'gridDivisions', 'description': 'number of divisions in the grid
\n', 'type': 'Number', 'optional': true }, { 'name': 'xOff', 'description': 'X axis offset from origin (0,0,0)
\n', 'type': 'Number', 'optional': true }, { 'name': 'yOff', 'description': 'Y axis offset from origin (0,0,0)
\n', 'type': 'Number', 'optional': true }, { 'name': 'zOff', 'description': 'Z axis offset from origin (0,0,0)
\n', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'mode', 'description': '', 'type': 'Constant' }, { 'name': 'axesSize', 'description': 'size of axes icon
\n', 'type': 'Number', 'optional': true }, { 'name': 'xOff', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'yOff', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'zOff', 'description': '', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'gridSize', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'gridDivisions', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'gridXOff', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'gridYOff', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'gridZOff', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'axesSize', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'axesXOff', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'axesYOff', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'axesZOff', 'description': '', 'type': 'Number', 'optional': true } ] } ] }, 'noDebugMode': { 'name': 'noDebugMode', 'class': 'p5', 'module': '3D' }, 'ambientLight': { 'name': 'ambientLight', 'class': 'p5', 'module': '3D', 'overloads': [ { 'params': [ { 'name': 'v1', 'description': 'red or hue value relative to\n the current color range
\n', 'type': 'Number' }, { 'name': 'v2', 'description': 'green or saturation value\n relative to the current color range
\n', 'type': 'Number' }, { 'name': 'v3', 'description': 'blue or brightness value\n relative to the current color range
\n', 'type': 'Number' }, { 'name': 'alpha', 'description': 'alpha value relative to current\n color range (default is 0-255)
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'gray', 'description': 'number specifying value between\n white and black
\n', 'type': 'Number' }, { 'name': 'alpha', 'description': '', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'value', 'description': 'a color string
\n', 'type': 'String' } ], 'chainable': 1 }, { 'params': [ { 'name': 'values', 'description': 'an array containing the red,green,blue &\n and alpha components of the color
\n', 'type': 'Number[]' } ], 'chainable': 1 }, { 'params': [ { 'name': 'color', 'description': 'color as a p5.Color
\n', 'type': 'p5.Color' } ], 'chainable': 1 } ] }, 'specularColor': { 'name': 'specularColor', 'class': 'p5', 'module': '3D', 'overloads': [ { 'params': [ { 'name': 'v1', 'description': 'red or hue value relative to\n the current color range
\n', 'type': 'Number' }, { 'name': 'v2', 'description': 'green or saturation value\n relative to the current color range
\n', 'type': 'Number' }, { 'name': 'v3', 'description': 'blue or brightness value\n relative to the current color range
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'gray', 'description': 'number specifying value between\n white and black
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'value', 'description': 'color as a CSS string
\n', 'type': 'String' } ], 'chainable': 1 }, { 'params': [ { 'name': 'values', 'description': 'color as an array containing the\n red, green, and blue components
\n', 'type': 'Number[]' } ], 'chainable': 1 }, { 'params': [ { 'name': 'color', 'description': 'color as a p5.Color
\n', 'type': 'p5.Color' } ], 'chainable': 1 } ] }, 'directionalLight': { 'name': 'directionalLight', 'class': 'p5', 'module': '3D', 'overloads': [ { 'params': [ { 'name': 'v1', 'description': 'red or hue value relative to the current\n color range
\n', 'type': 'Number' }, { 'name': 'v2', 'description': 'green or saturation value relative to the\n current color range
\n', 'type': 'Number' }, { 'name': 'v3', 'description': 'blue or brightness value relative to the\n current color range
\n', 'type': 'Number' }, { 'name': 'x', 'description': 'x component of direction (inclusive range of -1 to 1)
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y component of direction (inclusive range of -1 to 1)
\n', 'type': 'Number' }, { 'name': 'z', 'description': 'z component of direction (inclusive range of -1 to 1)
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'v1', 'description': '', 'type': 'Number' }, { 'name': 'v2', 'description': '', 'type': 'Number' }, { 'name': 'v3', 'description': '', 'type': 'Number' }, { 'name': 'direction', 'description': 'direction of light as a\n p5.Vector
\n', 'type': 'p5.Vector' } ], 'chainable': 1 }, { 'params': [ { 'name': 'color', 'description': 'color as a p5.Color,\n as an array, or as a CSS string
\n', 'type': 'p5.Color|Number[]|String' }, { 'name': 'x', 'description': '', 'type': 'Number' }, { 'name': 'y', 'description': '', 'type': 'Number' }, { 'name': 'z', 'description': '', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'color', 'description': '', 'type': 'p5.Color|Number[]|String' }, { 'name': 'direction', 'description': '', 'type': 'p5.Vector' } ], 'chainable': 1 } ] }, 'pointLight': { 'name': 'pointLight', 'class': 'p5', 'module': '3D', 'overloads': [ { 'params': [ { 'name': 'v1', 'description': 'red or hue value relative to the current\n color range
\n', 'type': 'Number' }, { 'name': 'v2', 'description': 'green or saturation value relative to the\n current color range
\n', 'type': 'Number' }, { 'name': 'v3', 'description': 'blue or brightness value relative to the\n current color range
\n', 'type': 'Number' }, { 'name': 'x', 'description': 'x component of position
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y component of position
\n', 'type': 'Number' }, { 'name': 'z', 'description': 'z component of position
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'v1', 'description': '', 'type': 'Number' }, { 'name': 'v2', 'description': '', 'type': 'Number' }, { 'name': 'v3', 'description': '', 'type': 'Number' }, { 'name': 'position', 'description': 'of light as a p5.Vector
\n', 'type': 'p5.Vector' } ], 'chainable': 1 }, { 'params': [ { 'name': 'color', 'description': 'color as a p5.Color,\n as an array, or as a CSS string
\n', 'type': 'p5.Color|Number[]|String' }, { 'name': 'x', 'description': '', 'type': 'Number' }, { 'name': 'y', 'description': '', 'type': 'Number' }, { 'name': 'z', 'description': '', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'color', 'description': '', 'type': 'p5.Color|Number[]|String' }, { 'name': 'position', 'description': '', 'type': 'p5.Vector' } ], 'chainable': 1 } ] }, 'imageLight': { 'name': 'imageLight', 'params': [ { 'name': 'img', 'description': 'image for the background
\n', 'type': 'p5.image' } ], 'class': 'p5', 'module': '3D' }, 'panorama': { 'name': 'panorama', 'params': [ { 'name': 'img', 'description': 'A 360-degree image to use as a background panorama
\n', 'type': 'p5.Image' } ], 'class': 'p5', 'module': '3D' }, 'lights': { 'name': 'lights', 'class': 'p5', 'module': '3D' }, 'lightFalloff': { 'name': 'lightFalloff', 'params': [ { 'name': 'constant', 'description': 'CONSTANT value for determining falloff
\n', 'type': 'Number' }, { 'name': 'linear', 'description': 'LINEAR value for determining falloff
\n', 'type': 'Number' }, { 'name': 'quadratic', 'description': 'QUADRATIC value for determining falloff
\n', 'type': 'Number' } ], 'class': 'p5', 'module': '3D' }, 'spotLight': { 'name': 'spotLight', 'class': 'p5', 'module': '3D', 'overloads': [ { 'params': [ { 'name': 'v1', 'description': 'red or hue value relative to the current color range
\n', 'type': 'Number' }, { 'name': 'v2', 'description': 'green or saturation value relative to the current color range
\n', 'type': 'Number' }, { 'name': 'v3', 'description': 'blue or brightness value relative to the current color range
\n', 'type': 'Number' }, { 'name': 'x', 'description': 'x component of position
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y component of position
\n', 'type': 'Number' }, { 'name': 'z', 'description': 'z component of position
\n', 'type': 'Number' }, { 'name': 'rx', 'description': 'x component of light direction (inclusive range of -1 to 1)
\n', 'type': 'Number' }, { 'name': 'ry', 'description': 'y component of light direction (inclusive range of -1 to 1)
\n', 'type': 'Number' }, { 'name': 'rz', 'description': 'z component of light direction (inclusive range of -1 to 1)
\n', 'type': 'Number' }, { 'name': 'angle', 'description': 'angle of cone. Defaults to PI/3
\n', 'type': 'Number', 'optional': true }, { 'name': 'concentration', 'description': 'concentration of cone. Defaults to 100
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'color', 'description': 'color as a p5.Color,\n as an array, or as a CSS string
\n', 'type': 'p5.Color|Number[]|String' }, { 'name': 'position', 'description': 'position of light as a p5.Vector
\n', 'type': 'p5.Vector' }, { 'name': 'direction', 'description': 'direction of light as a p5.Vector
\n', 'type': 'p5.Vector' }, { 'name': 'angle', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'concentration', 'description': '', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'v1', 'description': '', 'type': 'Number' }, { 'name': 'v2', 'description': '', 'type': 'Number' }, { 'name': 'v3', 'description': '', 'type': 'Number' }, { 'name': 'position', 'description': '', 'type': 'p5.Vector' }, { 'name': 'direction', 'description': '', 'type': 'p5.Vector' }, { 'name': 'angle', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'concentration', 'description': '', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'color', 'description': '', 'type': 'p5.Color|Number[]|String' }, { 'name': 'x', 'description': '', 'type': 'Number' }, { 'name': 'y', 'description': '', 'type': 'Number' }, { 'name': 'z', 'description': '', 'type': 'Number' }, { 'name': 'direction', 'description': '', 'type': 'p5.Vector' }, { 'name': 'angle', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'concentration', 'description': '', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'color', 'description': '', 'type': 'p5.Color|Number[]|String' }, { 'name': 'position', 'description': '', 'type': 'p5.Vector' }, { 'name': 'rx', 'description': '', 'type': 'Number' }, { 'name': 'ry', 'description': '', 'type': 'Number' }, { 'name': 'rz', 'description': '', 'type': 'Number' }, { 'name': 'angle', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'concentration', 'description': '', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'v1', 'description': '', 'type': 'Number' }, { 'name': 'v2', 'description': '', 'type': 'Number' }, { 'name': 'v3', 'description': '', 'type': 'Number' }, { 'name': 'x', 'description': '', 'type': 'Number' }, { 'name': 'y', 'description': '', 'type': 'Number' }, { 'name': 'z', 'description': '', 'type': 'Number' }, { 'name': 'direction', 'description': '', 'type': 'p5.Vector' }, { 'name': 'angle', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'concentration', 'description': '', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'v1', 'description': '', 'type': 'Number' }, { 'name': 'v2', 'description': '', 'type': 'Number' }, { 'name': 'v3', 'description': '', 'type': 'Number' }, { 'name': 'position', 'description': '', 'type': 'p5.Vector' }, { 'name': 'rx', 'description': '', 'type': 'Number' }, { 'name': 'ry', 'description': '', 'type': 'Number' }, { 'name': 'rz', 'description': '', 'type': 'Number' }, { 'name': 'angle', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'concentration', 'description': '', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'color', 'description': '', 'type': 'p5.Color|Number[]|String' }, { 'name': 'x', 'description': '', 'type': 'Number' }, { 'name': 'y', 'description': '', 'type': 'Number' }, { 'name': 'z', 'description': '', 'type': 'Number' }, { 'name': 'rx', 'description': '', 'type': 'Number' }, { 'name': 'ry', 'description': '', 'type': 'Number' }, { 'name': 'rz', 'description': '', 'type': 'Number' }, { 'name': 'angle', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'concentration', 'description': '', 'type': 'Number', 'optional': true } ] } ] }, 'noLights': { 'name': 'noLights', 'class': 'p5', 'module': '3D' }, 'loadModel': { 'name': 'loadModel', 'class': 'p5', 'module': 'Shape', 'overloads': [ { 'params': [ { 'name': 'path', 'description': 'Path of the model to be loaded
\n', 'type': 'String' }, { 'name': 'normalize', 'description': 'If true, scale the model to a\n standardized size when loading
\n', 'type': 'Boolean' }, { 'name': 'successCallback', 'description': 'Function to be called\n once the model is loaded. Will be passed\n the 3D model object.
\n', 'type': 'function(p5.Geometry)', 'optional': true }, { 'name': 'failureCallback', 'description': 'called with event error if\n the model fails to load.
\n', 'type': 'Function(Event)', 'optional': true }, { 'name': 'fileType', 'description': 'The file extension of the model\n (.stl, .obj).
Loaded 3d model to be rendered
\n', 'type': 'p5.Geometry' } ], 'class': 'p5', 'module': 'Shape' }, 'loadShader': { 'name': 'loadShader', 'params': [ { 'name': 'vertFilename', 'description': 'path to file containing vertex shader\nsource code
\n', 'type': 'String' }, { 'name': 'fragFilename', 'description': 'path to file containing fragment shader\nsource code
\n', 'type': 'String' }, { 'name': 'callback', 'description': 'callback to be executed after loadShader\ncompletes. On success, the p5.Shader object is passed as the first argument.
\n', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': 'callback to be executed when an error\noccurs inside loadShader. On error, the error is passed as the first\nargument.
\n', 'type': 'Function', 'optional': true } ], 'class': 'p5', 'module': '3D' }, 'createShader': { 'name': 'createShader', 'params': [ { 'name': 'vertSrc', 'description': 'source code for the vertex shader
\n', 'type': 'String' }, { 'name': 'fragSrc', 'description': 'source code for the fragment shader
\n', 'type': 'String' } ], 'class': 'p5', 'module': '3D' }, 'createFilterShader': { 'name': 'createFilterShader', 'params': [ { 'name': 'fragSrc', 'description': 'source code for the fragment shader
\n', 'type': 'String' } ], 'class': 'p5', 'module': '3D' }, 'shader': { 'name': 'shader', 'params': [ { 'name': 's', 'description': 'the p5.Shader object\nto use for rendering shapes.
\n', 'type': 'p5.Shader' } ], 'class': 'p5', 'module': '3D' }, 'resetShader': { 'name': 'resetShader', 'class': 'p5', 'module': '3D' }, 'texture': { 'name': 'texture', 'params': [ { 'name': 'tex', 'description': 'image to use as texture
\n', 'type': 'p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture' } ], 'class': 'p5', 'module': '3D' }, 'textureMode': { 'name': 'textureMode', 'params': [ { 'name': 'mode', 'description': 'either IMAGE or NORMAL
\n', 'type': 'Constant' } ], 'class': 'p5', 'module': '3D' }, 'textureWrap': { 'name': 'textureWrap', 'params': [ { 'name': 'wrapX', 'description': 'either CLAMP, REPEAT, or MIRROR
\n', 'type': 'Constant' }, { 'name': 'wrapY', 'description': 'either CLAMP, REPEAT, or MIRROR
\n', 'type': 'Constant', 'optional': true } ], 'class': 'p5', 'module': '3D' }, 'normalMaterial': { 'name': 'normalMaterial', 'class': 'p5', 'module': '3D' }, 'ambientMaterial': { 'name': 'ambientMaterial', 'class': 'p5', 'module': '3D', 'overloads': [ { 'params': [ { 'name': 'v1', 'description': 'red or hue value relative to the current\n color range
\n', 'type': 'Number' }, { 'name': 'v2', 'description': 'green or saturation value relative to the\n current color range
\n', 'type': 'Number' }, { 'name': 'v3', 'description': 'blue or brightness value relative to the\n current color range
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'gray', 'description': 'number specifying value between\n white and black
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'color', 'description': 'color as a p5.Color,\n as an array, or as a CSS string
\n', 'type': 'p5.Color|Number[]|String' } ], 'chainable': 1 } ] }, 'emissiveMaterial': { 'name': 'emissiveMaterial', 'class': 'p5', 'module': '3D', 'overloads': [ { 'params': [ { 'name': 'v1', 'description': 'red or hue value relative to the current\n color range
\n', 'type': 'Number' }, { 'name': 'v2', 'description': 'green or saturation value relative to the\n current color range
\n', 'type': 'Number' }, { 'name': 'v3', 'description': 'blue or brightness value relative to the\n current color range
\n', 'type': 'Number' }, { 'name': 'alpha', 'description': 'alpha value relative to current color\n range (default is 0-255)
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'gray', 'description': 'number specifying value between\n white and black
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'color', 'description': 'color as a p5.Color,\n as an array, or as a CSS string
\n', 'type': 'p5.Color|Number[]|String' } ], 'chainable': 1 } ] }, 'specularMaterial': { 'name': 'specularMaterial', 'class': 'p5', 'module': '3D', 'overloads': [ { 'params': [ { 'name': 'gray', 'description': 'number specifying value between white and black.
\n', 'type': 'Number' }, { 'name': 'alpha', 'description': 'alpha value relative to current color range\n (default is 0-255)
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'v1', 'description': 'red or hue value relative to\n the current color range
\n', 'type': 'Number' }, { 'name': 'v2', 'description': 'green or saturation value\n relative to the current color range
\n', 'type': 'Number' }, { 'name': 'v3', 'description': 'blue or brightness value\n relative to the current color range
\n', 'type': 'Number' }, { 'name': 'alpha', 'description': '', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'color', 'description': 'color as a p5.Color,\n as an array, or as a CSS string
\n', 'type': 'p5.Color|Number[]|String' } ], 'chainable': 1 } ] }, 'shininess': { 'name': 'shininess', 'params': [ { 'name': 'shine', 'description': 'degree of shininess
\n', 'type': 'Number' } ], 'class': 'p5', 'module': '3D' }, 'metalness': { 'name': 'metalness', 'params': [ { 'name': 'metallic', 'description': 'camera position value on x axis
\n', 'type': 'Number', 'optional': true }, { 'name': 'y', 'description': 'camera position value on y axis
\n', 'type': 'Number', 'optional': true }, { 'name': 'z', 'description': 'camera position value on z axis
\n', 'type': 'Number', 'optional': true }, { 'name': 'centerX', 'description': 'x coordinate representing center of the sketch
\n', 'type': 'Number', 'optional': true }, { 'name': 'centerY', 'description': 'y coordinate representing center of the sketch
\n', 'type': 'Number', 'optional': true }, { 'name': 'centerZ', 'description': 'z coordinate representing center of the sketch
\n', 'type': 'Number', 'optional': true }, { 'name': 'upX', 'description': 'x component of direction \'up\' from camera
\n', 'type': 'Number', 'optional': true }, { 'name': 'upY', 'description': 'y component of direction \'up\' from camera
\n', 'type': 'Number', 'optional': true }, { 'name': 'upZ', 'description': 'z component of direction \'up\' from camera
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': '3D' }, 'perspective': { 'name': 'perspective', 'params': [ { 'name': 'fovy', 'description': 'camera frustum vertical field of view,\n from bottom to top of view, in angleMode units
\n', 'type': 'Number', 'optional': true }, { 'name': 'aspect', 'description': 'camera frustum aspect ratio
\n', 'type': 'Number', 'optional': true }, { 'name': 'near', 'description': 'frustum near plane length
\n', 'type': 'Number', 'optional': true }, { 'name': 'far', 'description': 'frustum far plane length
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': '3D' }, 'ortho': { 'name': 'ortho', 'params': [ { 'name': 'left', 'description': 'camera frustum left plane
\n', 'type': 'Number', 'optional': true }, { 'name': 'right', 'description': 'camera frustum right plane
\n', 'type': 'Number', 'optional': true }, { 'name': 'bottom', 'description': 'camera frustum bottom plane
\n', 'type': 'Number', 'optional': true }, { 'name': 'top', 'description': 'camera frustum top plane
\n', 'type': 'Number', 'optional': true }, { 'name': 'near', 'description': 'camera frustum near plane
\n', 'type': 'Number', 'optional': true }, { 'name': 'far', 'description': 'camera frustum far plane
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': '3D' }, 'frustum': { 'name': 'frustum', 'params': [ { 'name': 'left', 'description': 'camera frustum left plane
\n', 'type': 'Number', 'optional': true }, { 'name': 'right', 'description': 'camera frustum right plane
\n', 'type': 'Number', 'optional': true }, { 'name': 'bottom', 'description': 'camera frustum bottom plane
\n', 'type': 'Number', 'optional': true }, { 'name': 'top', 'description': 'camera frustum top plane
\n', 'type': 'Number', 'optional': true }, { 'name': 'near', 'description': 'camera frustum near plane
\n', 'type': 'Number', 'optional': true }, { 'name': 'far', 'description': 'camera frustum far plane
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': '3D' }, 'createCamera': { 'name': 'createCamera', 'class': 'p5', 'module': '3D' }, 'setCamera': { 'name': 'setCamera', 'params': [ { 'name': 'cam', 'description': 'p5.Camera object
\n', 'type': 'p5.Camera' } ], 'class': 'p5', 'module': '3D' }, 'setAttributes': { 'name': 'setAttributes', 'class': 'p5', 'module': 'Rendering', 'overloads': [ { 'params': [ { 'name': 'key', 'description': 'Name of attribute
\n', 'type': 'String' }, { 'name': 'value', 'description': 'New value of named attribute
\n', 'type': 'Boolean' } ] }, { 'params': [ { 'name': 'obj', 'description': 'object with key-value pairs
\n', 'type': 'Object' } ] } ] }, 'getAudioContext': { 'name': 'getAudioContext', 'class': 'p5', 'module': 'p5.sound' }, 'userStartAudio': { 'params': [ { 'name': 'elements', 'description': 'This argument can be an Element,\n Selector String, NodeList, p5.Element,\n jQuery Element, or an Array of any of those.
\n', 'type': 'Element|Array', 'optional': true }, { 'name': 'callback', 'description': 'Callback to invoke when the AudioContext\n has started
\n', 'type': 'Function', 'optional': true } ], 'name': 'userStartAudio', 'class': 'p5', 'module': 'p5.sound' }, 'getOutputVolume': { 'name': 'getOutputVolume', 'class': 'p5', 'module': 'p5.sound' }, 'outputVolume': { 'name': 'outputVolume', 'params': [ { 'name': 'volume', 'description': 'Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator
\n', 'type': 'Number|Object' }, { 'name': 'rampTime', 'description': 'Fade for t seconds
\n', 'type': 'Number', 'optional': true }, { 'name': 'timeFromNow', 'description': 'Schedule this event to happen at\n t seconds in the future
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5', 'module': 'p5.sound' }, 'soundOut': { 'name': 'soundOut', 'class': 'p5', 'module': 'p5.sound' }, 'sampleRate': { 'name': 'sampleRate', 'class': 'p5', 'module': 'p5.sound' }, 'freqToMidi': { 'name': 'freqToMidi', 'params': [ { 'name': 'frequency', 'description': 'A freqeuncy, for example, the "A"\n above Middle C is 440Hz
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'p5.sound' }, 'midiToFreq': { 'name': 'midiToFreq', 'params': [ { 'name': 'midiNote', 'description': 'The number of a MIDI note
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'p5.sound' }, 'soundFormats': { 'name': 'soundFormats', 'params': [ { 'name': 'formats', 'description': 'i.e. \'mp3\', \'wav\', \'ogg\'
\n', 'type': 'String', 'optional': true, 'multiple': true } ], 'class': 'p5', 'module': 'p5.sound' }, 'saveSound': { 'name': 'saveSound', 'params': [ { 'name': 'soundFile', 'description': 'p5.SoundFile that you wish to save
\n', 'type': 'p5.SoundFile' }, { 'name': 'fileName', 'description': 'name of the resulting .wav file.
\n', 'type': 'String' } ], 'class': 'p5', 'module': 'p5.sound' }, 'loadSound': { 'name': 'loadSound', 'params': [ { 'name': 'path', 'description': 'Path to the sound file, or an array with\n paths to soundfiles in multiple formats\n i.e. [\'sound.ogg\', \'sound.mp3\'].\n Alternately, accepts an object: either\n from the HTML5 File API, or a p5.File.
\n', 'type': 'String|Array' }, { 'name': 'successCallback', 'description': 'Name of a function to call once file loads
\n', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': 'Name of a function to call if there is\n an error loading the file.
\n', 'type': 'Function', 'optional': true }, { 'name': 'whileLoading', 'description': 'Name of a function to call while file is loading.\n This function will receive the percentage loaded\n so far, from 0.0 to 1.0.
\n', 'type': 'Function', 'optional': true } ], 'class': 'p5', 'module': 'p5.sound' }, 'createConvolver': { 'name': 'createConvolver', 'params': [ { 'name': 'path', 'description': 'path to a sound file
\n', 'type': 'String' }, { 'name': 'callback', 'description': 'function to call if loading is successful.\n The object will be passed in as the argument\n to the callback function.
\n', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': 'function to call if loading is not successful.\n A custom error will be passed in as the argument\n to the callback function.
\n', 'type': 'Function', 'optional': true } ], 'class': 'p5', 'module': 'p5.sound' }, 'setBPM': { 'name': 'setBPM', 'params': [ { 'name': 'BPM', 'description': 'Beats Per Minute
\n', 'type': 'Number' }, { 'name': 'rampTime', 'description': 'Seconds from now
\n', 'type': 'Number' } ], 'class': 'p5', 'module': 'p5.sound' } }, 'p5.Color': { 'toString': { 'name': 'toString', 'params': [ { 'name': 'format', 'description': 'how the color string will be formatted.\nLeaving this empty formats the string as rgba(r, g, b, a).\n\'#rgb\' \'#rgba\' \'#rrggbb\' and \'#rrggbbaa\' format as hexadecimal color codes.\n\'rgb\' \'hsb\' and \'hsl\' return the color formatted in the specified color mode.\n\'rgba\' \'hsba\' and \'hsla\' are the same as above but with alpha channels.\n\'rgb%\' \'hsb%\' \'hsl%\' \'rgba%\' \'hsba%\' and \'hsla%\' format as percentages.
\n', 'type': 'String', 'optional': true } ], 'class': 'p5.Color', 'module': 'Color' }, 'setRed': { 'name': 'setRed', 'params': [ { 'name': 'red', 'description': 'the new red value.
\n', 'type': 'Number' } ], 'class': 'p5.Color', 'module': 'Color' }, 'setGreen': { 'name': 'setGreen', 'params': [ { 'name': 'green', 'description': 'the new green value.
\n', 'type': 'Number' } ], 'class': 'p5.Color', 'module': 'Color' }, 'setBlue': { 'name': 'setBlue', 'params': [ { 'name': 'blue', 'description': 'the new blue value.
\n', 'type': 'Number' } ], 'class': 'p5.Color', 'module': 'Color' }, 'setAlpha': { 'name': 'setAlpha', 'params': [ { 'name': 'alpha', 'description': 'the new alpha value.
\n', 'type': 'Number' } ], 'class': 'p5.Color', 'module': 'Color' } }, 'p5.Element': { 'elt': { 'name': 'elt', 'class': 'p5.Element', 'module': 'DOM' }, 'width': { 'name': 'width', 'class': 'p5.Element', 'module': 'DOM' }, 'height': { 'name': 'height', 'class': 'p5.Element', 'module': 'DOM' }, 'parent': { 'name': 'parent', 'class': 'p5.Element', 'module': 'DOM', 'overloads': [ { 'params': [ { 'name': 'parent', 'description': 'ID, p5.Element,\n or HTMLElement of desired parent element.
\n', 'type': 'String|p5.Element|Object' } ], 'chainable': 1 }, { 'params': [ ] } ] }, 'id': { 'name': 'id', 'class': 'p5.Element', 'module': 'DOM', 'overloads': [ { 'params': [ { 'name': 'id', 'description': 'ID of the element.
\n', 'type': 'String' } ], 'chainable': 1 }, { 'params': [ ] } ] }, 'class': { 'name': 'class', 'class': 'p5.Element', 'module': 'DOM', 'overloads': [ { 'params': [ { 'name': 'class', 'description': 'class to add.
\n', 'type': 'String' } ], 'chainable': 1 }, { 'params': [ ] } ] }, 'mousePressed': { 'name': 'mousePressed', 'params': [ { 'name': 'fxn', 'description': 'function to call when the mouse is\n pressed over the element.\n false disables the function.
function to call when the mouse is\n double clicked over the element.\n false disables the function.
function to call when the mouse wheel is\n scrolled over the element.\n false disables the function.
function to call when the mouse is\n pressed over the element.\n false disables the function.
function to call when the mouse is\n pressed and released over the element.\n false disables the function.
function to call when the mouse\n moves over the element.\n false disables the function.
function to call when the mouse\n moves onto the element.\n false disables the function.
function to call when the mouse\n moves off the element.\n false disables the function.
function to call when the touch\n starts.\n false disables the function.
function to call when the touch\n moves over the element.\n false disables the function.
function to call when the touch\n ends.\n false disables the function.
function to call when the file is\n dragged over the element.\n false disables the function.
function to call when the file is\n dragged off the element.\n false disables the function.
name of class to add
\n', 'type': 'String' } ], 'class': 'p5.Element', 'module': 'DOM' }, 'removeClass': { 'name': 'removeClass', 'params': [ { 'name': 'class', 'description': 'name of class to remove
\n', 'type': 'String' } ], 'class': 'p5.Element', 'module': 'DOM' }, 'hasClass': { 'name': 'hasClass', 'params': [ { 'name': 'c', 'description': 'class name of class to check
\n', 'type': 'String' } ], 'class': 'p5.Element', 'module': 'DOM' }, 'toggleClass': { 'name': 'toggleClass', 'params': [ { 'name': 'c', 'description': 'class name to toggle
\n', 'type': 'String' } ], 'class': 'p5.Element', 'module': 'DOM' }, 'child': { 'name': 'child', 'class': 'p5.Element', 'module': 'DOM', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'child', 'description': 'the ID, DOM node, or p5.Element\n to add to the current element
\n', 'type': 'String|p5.Element', 'optional': true } ], 'chainable': 1 } ] }, 'center': { 'name': 'center', 'params': [ { 'name': 'align', 'description': 'passing \'vertical\', \'horizontal\' aligns element accordingly
\n', 'type': 'String', 'optional': true } ], 'class': 'p5.Element', 'module': 'DOM' }, 'html': { 'name': 'html', 'class': 'p5.Element', 'module': 'DOM', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'html', 'description': 'the HTML to be placed inside the element
\n', 'type': 'String', 'optional': true }, { 'name': 'append', 'description': 'whether to append HTML to existing
\n', 'type': 'Boolean', 'optional': true } ], 'chainable': 1 } ] }, 'position': { 'name': 'position', 'class': 'p5.Element', 'module': 'DOM', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'x', 'description': 'x-position relative to upper left of window (optional)
\n', 'type': 'Number', 'optional': true }, { 'name': 'y', 'description': 'y-position relative to upper left of window (optional)
\n', 'type': 'Number', 'optional': true }, { 'name': 'positionType', 'description': 'it can be static, fixed, relative, sticky, initial or inherit (optional)
\n', 'type': 'String', 'optional': true } ], 'chainable': 1 } ] }, 'style': { 'name': 'style', 'class': 'p5.Element', 'module': 'DOM', 'overloads': [ { 'params': [ { 'name': 'property', 'description': 'style property to set.
\n', 'type': 'String' } ] }, { 'params': [ { 'name': 'property', 'description': '', 'type': 'String' }, { 'name': 'value', 'description': 'value to assign to the property.
\n', 'type': 'String|p5.Color' } ], 'chainable': 1 } ] }, 'attribute': { 'name': 'attribute', 'class': 'p5.Element', 'module': 'DOM', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'attr', 'description': 'attribute to set.
\n', 'type': 'String' }, { 'name': 'value', 'description': 'value to assign to the attribute.
\n', 'type': 'String' } ], 'chainable': 1 } ] }, 'removeAttribute': { 'name': 'removeAttribute', 'params': [ { 'name': 'attr', 'description': 'attribute to remove.
\n', 'type': 'String' } ], 'class': 'p5.Element', 'module': 'DOM' }, 'value': { 'name': 'value', 'class': 'p5.Element', 'module': 'DOM', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'value', 'description': '', 'type': 'String|Number' } ], 'chainable': 1 } ] }, 'show': { 'name': 'show', 'class': 'p5.Element', 'module': 'DOM' }, 'hide': { 'name': 'hide', 'class': 'p5.Element', 'module': 'DOM' }, 'size': { 'name': 'size', 'class': 'p5.Element', 'module': 'DOM', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'w', 'description': 'width of the element, either AUTO, or a number.
\n', 'type': 'Number|Constant', 'optional': true }, { 'name': 'h', 'description': 'height of the element, either AUTO, or a number.
\n', 'type': 'Number|Constant', 'optional': true } ], 'chainable': 1 } ] }, 'remove': { 'name': 'remove', 'class': 'p5.Element', 'module': 'DOM' }, 'drop': { 'name': 'drop', 'params': [ { 'name': 'callback', 'description': 'called when a file loads. Called once for each file dropped.
\n', 'type': 'Function' }, { 'name': 'fxn', 'description': 'called once when any files are dropped.
\n', 'type': 'Function', 'optional': true } ], 'class': 'p5.Element', 'module': 'DOM' }, 'draggable': { 'name': 'draggable', 'params': [ { 'name': 'elmnt', 'description': 'pass another p5.Element
\n', 'type': 'p5.Element', 'optional': true } ], 'class': 'p5.Element', 'module': 'DOM' } }, 'p5.Graphics': { 'reset': { 'name': 'reset', 'class': 'p5.Graphics', 'module': 'Rendering' }, 'remove': { 'name': 'remove', 'class': 'p5.Graphics', 'module': 'Rendering' }, 'createFramebuffer': { 'name': 'createFramebuffer', 'class': 'p5.Graphics', 'module': 'Rendering' } }, 'JSON': { 'stringify': { 'name': 'stringify', 'params': [ { 'name': 'object', 'description': ':Javascript object that you would like to convert to JSON
\n', 'type': 'Object' } ], 'class': 'JSON', 'module': 'Foundation' } }, 'console': { 'log': { 'name': 'log', 'params': [ { 'name': 'message', 'description': ':Message that you would like to print to the console
\n', 'type': 'String|Expression|Object' } ], 'class': 'console', 'module': 'Foundation' } }, 'p5.TypedDict': { 'size': { 'name': 'size', 'class': 'p5.TypedDict', 'module': 'Data' }, 'hasKey': { 'name': 'hasKey', 'params': [ { 'name': 'key', 'description': 'that you want to look up
\n', 'type': 'Number|String' } ], 'class': 'p5.TypedDict', 'module': 'Data' }, 'get': { 'name': 'get', 'params': [ { 'name': 'the', 'description': 'key you want to access
\n', 'type': 'Number|String' } ], 'class': 'p5.TypedDict', 'module': 'Data' }, 'set': { 'name': 'set', 'params': [ { 'name': 'key', 'description': '', 'type': 'Number|String' }, { 'name': 'value', 'description': '', 'type': 'Number|String' } ], 'class': 'p5.TypedDict', 'module': 'Data' }, 'create': { 'name': 'create', 'class': 'p5.TypedDict', 'module': 'Data', 'overloads': [ { 'params': [ { 'name': 'key', 'description': '', 'type': 'Number|String' }, { 'name': 'value', 'description': '', 'type': 'Number|String' } ] }, { 'params': [ { 'name': 'obj', 'description': 'key/value pair
\n', 'type': 'Object' } ] } ] }, 'clear': { 'name': 'clear', 'class': 'p5.TypedDict', 'module': 'Data' }, 'remove': { 'name': 'remove', 'params': [ { 'name': 'key', 'description': 'for the pair to remove
\n', 'type': 'Number|String' } ], 'class': 'p5.TypedDict', 'module': 'Data' }, 'print': { 'name': 'print', 'class': 'p5.TypedDict', 'module': 'Data' }, 'saveTable': { 'name': 'saveTable', 'class': 'p5.TypedDict', 'module': 'Data' }, 'saveJSON': { 'name': 'saveJSON', 'class': 'p5.TypedDict', 'module': 'Data' } }, 'p5.NumberDict': { 'add': { 'name': 'add', 'params': [ { 'name': 'Key', 'description': 'for the value you wish to add to
\n', 'type': 'Number' }, { 'name': 'Number', 'description': 'to add to the value
\n', 'type': 'Number' } ], 'class': 'p5.NumberDict', 'module': 'Data' }, 'sub': { 'name': 'sub', 'params': [ { 'name': 'Key', 'description': 'for the value you wish to subtract from
\n', 'type': 'Number' }, { 'name': 'Number', 'description': 'to subtract from the value
\n', 'type': 'Number' } ], 'class': 'p5.NumberDict', 'module': 'Data' }, 'mult': { 'name': 'mult', 'params': [ { 'name': 'Key', 'description': 'for value you wish to multiply
\n', 'type': 'Number' }, { 'name': 'Amount', 'description': 'to multiply the value by
\n', 'type': 'Number' } ], 'class': 'p5.NumberDict', 'module': 'Data' }, 'div': { 'name': 'div', 'params': [ { 'name': 'Key', 'description': 'for value you wish to divide
\n', 'type': 'Number' }, { 'name': 'Amount', 'description': 'to divide the value by
\n', 'type': 'Number' } ], 'class': 'p5.NumberDict', 'module': 'Data' }, 'minValue': { 'name': 'minValue', 'class': 'p5.NumberDict', 'module': 'Data' }, 'maxValue': { 'name': 'maxValue', 'class': 'p5.NumberDict', 'module': 'Data' }, 'minKey': { 'name': 'minKey', 'class': 'p5.NumberDict', 'module': 'Data' }, 'maxKey': { 'name': 'maxKey', 'class': 'p5.NumberDict', 'module': 'Data' } }, 'p5.MediaElement': { 'src': { 'name': 'src', 'class': 'p5.MediaElement', 'module': 'DOM' }, 'play': { 'name': 'play', 'class': 'p5.MediaElement', 'module': 'DOM' }, 'stop': { 'name': 'stop', 'class': 'p5.MediaElement', 'module': 'DOM' }, 'pause': { 'name': 'pause', 'class': 'p5.MediaElement', 'module': 'DOM' }, 'loop': { 'name': 'loop', 'class': 'p5.MediaElement', 'module': 'DOM' }, 'noLoop': { 'name': 'noLoop', 'class': 'p5.MediaElement', 'module': 'DOM' }, 'autoplay': { 'name': 'autoplay', 'params': [ { 'name': 'shouldAutoplay', 'description': 'whether the element should autoplay.
\n', 'type': 'Boolean', 'optional': true } ], 'class': 'p5.MediaElement', 'module': 'DOM' }, 'volume': { 'name': 'volume', 'class': 'p5.MediaElement', 'module': 'DOM', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'val', 'description': 'volume between 0.0 and 1.0.
\n', 'type': 'Number' } ], 'chainable': 1 } ] }, 'speed': { 'name': 'speed', 'class': 'p5.MediaElement', 'module': 'DOM', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'speed', 'description': 'speed multiplier for playback.
\n', 'type': 'Number' } ], 'chainable': 1 } ] }, 'time': { 'name': 'time', 'class': 'p5.MediaElement', 'module': 'DOM', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'time', 'description': 'time to jump to (in seconds).
\n', 'type': 'Number' } ], 'chainable': 1 } ] }, 'duration': { 'name': 'duration', 'class': 'p5.MediaElement', 'module': 'DOM' }, 'onended': { 'name': 'onended', 'params': [ { 'name': 'callback', 'description': 'function to call when playback ends.\n The p5.MediaElement is passed as\n the argument.
AudioNode from the Web Audio API,\nor an object from the p5.sound library
\n', 'type': 'AudioNode|Object' } ], 'class': 'p5.MediaElement', 'module': 'DOM' }, 'disconnect': { 'name': 'disconnect', 'class': 'p5.MediaElement', 'module': 'DOM' }, 'showControls': { 'name': 'showControls', 'class': 'p5.MediaElement', 'module': 'DOM' }, 'hideControls': { 'name': 'hideControls', 'class': 'p5.MediaElement', 'module': 'DOM' }, 'addCue': { 'name': 'addCue', 'params': [ { 'name': 'time', 'description': 'cue time to run the callback function.
\n', 'type': 'Number' }, { 'name': 'callback', 'description': 'function to call at the cue time.
\n', 'type': 'Function' }, { 'name': 'value', 'description': 'object to pass as the argument to\n callback.
ID of the cue, created by media.addCue().
A scaling factor for the number of pixels per\nside
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Image', 'module': 'Image' }, 'loadPixels': { 'name': 'loadPixels', 'class': 'p5.Image', 'module': 'Image' }, 'updatePixels': { 'name': 'updatePixels', 'class': 'p5.Image', 'module': 'Image', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'x-coordinate of the upper-left corner\n of the subsection to update.
\n', 'type': 'Integer' }, { 'name': 'y', 'description': 'y-coordinate of the upper-left corner\n of the subsection to update.
\n', 'type': 'Integer' }, { 'name': 'w', 'description': 'width of the subsection to update.
\n', 'type': 'Integer' }, { 'name': 'h', 'description': 'height of the subsection to update.
\n', 'type': 'Integer' } ] }, { 'params': [ ] } ] }, 'get': { 'name': 'get', 'class': 'p5.Image', 'module': 'Image', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'x-coordinate of the pixel.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the pixel.
\n', 'type': 'Number' }, { 'name': 'w', 'description': 'width of the subsection to be returned.
\n', 'type': 'Number' }, { 'name': 'h', 'description': 'height of the subsection to be returned.
\n', 'type': 'Number' } ] }, { 'params': [ ] }, { 'params': [ { 'name': 'x', 'description': '', 'type': 'Number' }, { 'name': 'y', 'description': '', 'type': 'Number' } ] } ] }, 'set': { 'name': 'set', 'params': [ { 'name': 'x', 'description': 'x-coordinate of the pixel.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the pixel.
\n', 'type': 'Number' }, { 'name': 'a', 'description': 'grayscale value | pixel array |\n p5.Color object |\n p5.Image to copy.
\n', 'type': 'Number|Number[]|Object' } ], 'class': 'p5.Image', 'module': 'Image' }, 'resize': { 'name': 'resize', 'params': [ { 'name': 'width', 'description': 'resized image width.
\n', 'type': 'Number' }, { 'name': 'height', 'description': 'resized image height.
\n', 'type': 'Number' } ], 'class': 'p5.Image', 'module': 'Image' }, 'copy': { 'name': 'copy', 'class': 'p5.Image', 'module': 'Image', 'overloads': [ { 'params': [ { 'name': 'srcImage', 'description': 'source image.
\n', 'type': 'p5.Image|p5.Element' }, { 'name': 'sx', 'description': 'x-coordinate of the source\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'sy', 'description': 'y-coordinate of the source\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'sw', 'description': 'source image width.
\n', 'type': 'Integer' }, { 'name': 'sh', 'description': 'source image height.
\n', 'type': 'Integer' }, { 'name': 'dx', 'description': 'x-coordinate of the destination\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'dy', 'description': 'y-coordinate of the destination\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'dw', 'description': 'destination image width.
\n', 'type': 'Integer' }, { 'name': 'dh', 'description': 'destination image height.
\n', 'type': 'Integer' } ] }, { 'params': [ { 'name': 'sx', 'description': '', 'type': 'Integer' }, { 'name': 'sy', 'description': '', 'type': 'Integer' }, { 'name': 'sw', 'description': '', 'type': 'Integer' }, { 'name': 'sh', 'description': '', 'type': 'Integer' }, { 'name': 'dx', 'description': '', 'type': 'Integer' }, { 'name': 'dy', 'description': '', 'type': 'Integer' }, { 'name': 'dw', 'description': '', 'type': 'Integer' }, { 'name': 'dh', 'description': '', 'type': 'Integer' } ] } ] }, 'mask': { 'name': 'mask', 'params': [ { 'name': 'srcImage', 'description': 'source image.
\n', 'type': 'p5.Image' } ], 'class': 'p5.Image', 'module': 'Image' }, 'filter': { 'name': 'filter', 'params': [ { 'name': 'filterType', 'description': 'either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, ERODE, DILATE or BLUR.
\n', 'type': 'Constant' }, { 'name': 'filterParam', 'description': 'parameter unique to each filter.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Image', 'module': 'Image' }, 'blend': { 'name': 'blend', 'class': 'p5.Image', 'module': 'Image', 'overloads': [ { 'params': [ { 'name': 'srcImage', 'description': 'source image
\n', 'type': 'p5.Image' }, { 'name': 'sx', 'description': 'x-coordinate of the source\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'sy', 'description': 'y-coordinate of the source\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'sw', 'description': 'source image width.
\n', 'type': 'Integer' }, { 'name': 'sh', 'description': 'source image height.
\n', 'type': 'Integer' }, { 'name': 'dx', 'description': 'x-coordinate of the destination\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'dy', 'description': 'y-coordinate of the destination\'s upper-left corner.
\n', 'type': 'Integer' }, { 'name': 'dw', 'description': 'destination image width.
\n', 'type': 'Integer' }, { 'name': 'dh', 'description': 'destination image height.
\n', 'type': 'Integer' }, { 'name': 'blendMode', 'description': 'the blend mode. either\n BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
\nAvailable blend modes are: normal | multiply | screen | overlay |\n darken | lighten | color-dodge | color-burn | hard-light |\n soft-light | difference | exclusion | hue | saturation |\n color | luminosity
\nhttp://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
\n', 'type': 'Constant' } ] }, { 'params': [ { 'name': 'sx', 'description': '', 'type': 'Integer' }, { 'name': 'sy', 'description': '', 'type': 'Integer' }, { 'name': 'sw', 'description': '', 'type': 'Integer' }, { 'name': 'sh', 'description': '', 'type': 'Integer' }, { 'name': 'dx', 'description': '', 'type': 'Integer' }, { 'name': 'dy', 'description': '', 'type': 'Integer' }, { 'name': 'dw', 'description': '', 'type': 'Integer' }, { 'name': 'dh', 'description': '', 'type': 'Integer' }, { 'name': 'blendMode', 'description': '', 'type': 'Constant' } ] } ] }, 'save': { 'name': 'save', 'params': [ { 'name': 'filename', 'description': 'filename. Defaults to \'untitled\'.
\n', 'type': 'String' }, { 'name': 'extension', 'description': 'file extension, either \'png\' or \'jpg\'.\n Defaults to \'png\'.
\n', 'type': 'String', 'optional': true } ], 'class': 'p5.Image', 'module': 'Image' }, 'reset': { 'name': 'reset', 'class': 'p5.Image', 'module': 'Image' }, 'getCurrentFrame': { 'name': 'getCurrentFrame', 'class': 'p5.Image', 'module': 'Image' }, 'setFrame': { 'name': 'setFrame', 'params': [ { 'name': 'index', 'description': 'index of the frame to display.
\n', 'type': 'Number' } ], 'class': 'p5.Image', 'module': 'Image' }, 'numFrames': { 'name': 'numFrames', 'class': 'p5.Image', 'module': 'Image' }, 'play': { 'name': 'play', 'class': 'p5.Image', 'module': 'Image' }, 'pause': { 'name': 'pause', 'class': 'p5.Image', 'module': 'Image' }, 'delay': { 'name': 'delay', 'params': [ { 'name': 'd', 'description': 'delay in milliseconds between switching frames.
\n', 'type': 'Number' }, { 'name': 'index', 'description': 'index of the frame that will have its delay modified.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Image', 'module': 'Image' } }, 'p5.PrintWriter': { 'write': { 'name': 'write', 'params': [ { 'name': 'data', 'description': 'all data to be written by the PrintWriter
\n', 'type': 'Array' } ], 'class': 'p5.PrintWriter', 'module': 'IO' }, 'print': { 'name': 'print', 'params': [ { 'name': 'data', 'description': 'all data to be printed by the PrintWriter
\n', 'type': 'Array' } ], 'class': 'p5.PrintWriter', 'module': 'IO' }, 'clear': { 'name': 'clear', 'class': 'p5.PrintWriter', 'module': 'IO' }, 'close': { 'name': 'close', 'class': 'p5.PrintWriter', 'module': 'IO' } }, 'p5.Table': { 'columns': { 'name': 'columns', 'class': 'p5.Table', 'module': 'IO' }, 'rows': { 'name': 'rows', 'class': 'p5.Table', 'module': 'IO' }, 'addRow': { 'name': 'addRow', 'params': [ { 'name': 'row', 'description': 'row to be added to the table
\n', 'type': 'p5.TableRow', 'optional': true } ], 'class': 'p5.Table', 'module': 'IO' }, 'removeRow': { 'name': 'removeRow', 'params': [ { 'name': 'id', 'description': 'ID number of the row to remove
\n', 'type': 'Integer' } ], 'class': 'p5.Table', 'module': 'IO' }, 'getRow': { 'name': 'getRow', 'params': [ { 'name': 'rowID', 'description': 'ID number of the row to get
\n', 'type': 'Integer' } ], 'class': 'p5.Table', 'module': 'IO' }, 'getRows': { 'name': 'getRows', 'class': 'p5.Table', 'module': 'IO' }, 'findRow': { 'name': 'findRow', 'params': [ { 'name': 'value', 'description': 'The value to match
\n', 'type': 'String' }, { 'name': 'column', 'description': 'ID number or title of the\n column to search
\n', 'type': 'Integer|String' } ], 'class': 'p5.Table', 'module': 'IO' }, 'findRows': { 'name': 'findRows', 'params': [ { 'name': 'value', 'description': 'The value to match
\n', 'type': 'String' }, { 'name': 'column', 'description': 'ID number or title of the\n column to search
\n', 'type': 'Integer|String' } ], 'class': 'p5.Table', 'module': 'IO' }, 'matchRow': { 'name': 'matchRow', 'params': [ { 'name': 'regexp', 'description': 'The regular expression to match
\n', 'type': 'String|RegExp' }, { 'name': 'column', 'description': 'The column ID (number) or\n title (string)
\n', 'type': 'String|Integer' } ], 'class': 'p5.Table', 'module': 'IO' }, 'matchRows': { 'name': 'matchRows', 'params': [ { 'name': 'regexp', 'description': 'The regular expression to match
\n', 'type': 'String' }, { 'name': 'column', 'description': 'The column ID (number) or\n title (string)
\n', 'type': 'String|Integer', 'optional': true } ], 'class': 'p5.Table', 'module': 'IO' }, 'getColumn': { 'name': 'getColumn', 'params': [ { 'name': 'column', 'description': 'String or Number of the column to return
\n', 'type': 'String|Number' } ], 'class': 'p5.Table', 'module': 'IO' }, 'clearRows': { 'name': 'clearRows', 'class': 'p5.Table', 'module': 'IO' }, 'addColumn': { 'name': 'addColumn', 'params': [ { 'name': 'title', 'description': 'title of the given column
\n', 'type': 'String', 'optional': true } ], 'class': 'p5.Table', 'module': 'IO' }, 'getColumnCount': { 'name': 'getColumnCount', 'class': 'p5.Table', 'module': 'IO' }, 'getRowCount': { 'name': 'getRowCount', 'class': 'p5.Table', 'module': 'IO' }, 'removeTokens': { 'name': 'removeTokens', 'params': [ { 'name': 'chars', 'description': 'String listing characters to be removed
\n', 'type': 'String' }, { 'name': 'column', 'description': 'Column ID (number)\n or name (string)
\n', 'type': 'String|Integer', 'optional': true } ], 'class': 'p5.Table', 'module': 'IO' }, 'trim': { 'name': 'trim', 'params': [ { 'name': 'column', 'description': 'Column ID (number)\n or name (string)
\n', 'type': 'String|Integer', 'optional': true } ], 'class': 'p5.Table', 'module': 'IO' }, 'removeColumn': { 'name': 'removeColumn', 'params': [ { 'name': 'column', 'description': 'columnName (string) or ID (number)
\n', 'type': 'String|Integer' } ], 'class': 'p5.Table', 'module': 'IO' }, 'set': { 'name': 'set', 'params': [ { 'name': 'row', 'description': 'row ID
\n', 'type': 'Integer' }, { 'name': 'column', 'description': 'column ID (Number)\n or title (String)
\n', 'type': 'String|Integer' }, { 'name': 'value', 'description': 'value to assign
\n', 'type': 'String|Number' } ], 'class': 'p5.Table', 'module': 'IO' }, 'setNum': { 'name': 'setNum', 'params': [ { 'name': 'row', 'description': 'row ID
\n', 'type': 'Integer' }, { 'name': 'column', 'description': 'column ID (Number)\n or title (String)
\n', 'type': 'String|Integer' }, { 'name': 'value', 'description': 'value to assign
\n', 'type': 'Number' } ], 'class': 'p5.Table', 'module': 'IO' }, 'setString': { 'name': 'setString', 'params': [ { 'name': 'row', 'description': 'row ID
\n', 'type': 'Integer' }, { 'name': 'column', 'description': 'column ID (Number)\n or title (String)
\n', 'type': 'String|Integer' }, { 'name': 'value', 'description': 'value to assign
\n', 'type': 'String' } ], 'class': 'p5.Table', 'module': 'IO' }, 'get': { 'name': 'get', 'params': [ { 'name': 'row', 'description': 'row ID
\n', 'type': 'Integer' }, { 'name': 'column', 'description': 'columnName (string) or\n ID (number)
\n', 'type': 'String|Integer' } ], 'class': 'p5.Table', 'module': 'IO' }, 'getNum': { 'name': 'getNum', 'params': [ { 'name': 'row', 'description': 'row ID
\n', 'type': 'Integer' }, { 'name': 'column', 'description': 'columnName (string) or\n ID (number)
\n', 'type': 'String|Integer' } ], 'class': 'p5.Table', 'module': 'IO' }, 'getString': { 'name': 'getString', 'params': [ { 'name': 'row', 'description': 'row ID
\n', 'type': 'Integer' }, { 'name': 'column', 'description': 'columnName (string) or\n ID (number)
\n', 'type': 'String|Integer' } ], 'class': 'p5.Table', 'module': 'IO' }, 'getObject': { 'name': 'getObject', 'params': [ { 'name': 'headerColumn', 'description': 'Name of the column which should be used to\n title each row object (optional)
\n', 'type': 'String', 'optional': true } ], 'class': 'p5.Table', 'module': 'IO' }, 'getArray': { 'name': 'getArray', 'class': 'p5.Table', 'module': 'IO' } }, 'p5.TableRow': { 'set': { 'name': 'set', 'params': [ { 'name': 'column', 'description': 'Column ID (Number)\n or Title (String)
\n', 'type': 'String|Integer' }, { 'name': 'value', 'description': 'The value to be stored
\n', 'type': 'String|Number' } ], 'class': 'p5.TableRow', 'module': 'IO' }, 'setNum': { 'name': 'setNum', 'params': [ { 'name': 'column', 'description': 'Column ID (Number)\n or Title (String)
\n', 'type': 'String|Integer' }, { 'name': 'value', 'description': 'The value to be stored\n as a Float
\n', 'type': 'Number|String' } ], 'class': 'p5.TableRow', 'module': 'IO' }, 'setString': { 'name': 'setString', 'params': [ { 'name': 'column', 'description': 'Column ID (Number)\n or Title (String)
\n', 'type': 'String|Integer' }, { 'name': 'value', 'description': 'The value to be stored\n as a String
\n', 'type': 'String|Number|Boolean|Object' } ], 'class': 'p5.TableRow', 'module': 'IO' }, 'get': { 'name': 'get', 'params': [ { 'name': 'column', 'description': 'columnName (string) or\n ID (number)
\n', 'type': 'String|Integer' } ], 'class': 'p5.TableRow', 'module': 'IO' }, 'getNum': { 'name': 'getNum', 'params': [ { 'name': 'column', 'description': 'columnName (string) or\n ID (number)
\n', 'type': 'String|Integer' } ], 'class': 'p5.TableRow', 'module': 'IO' }, 'getString': { 'name': 'getString', 'params': [ { 'name': 'column', 'description': 'columnName (string) or\n ID (number)
\n', 'type': 'String|Integer' } ], 'class': 'p5.TableRow', 'module': 'IO' } }, 'p5.XML': { 'getParent': { 'name': 'getParent', 'class': 'p5.XML', 'module': 'IO' }, 'getName': { 'name': 'getName', 'class': 'p5.XML', 'module': 'IO' }, 'setName': { 'name': 'setName', 'params': [ { 'name': 'the', 'description': 'new name of the node
\n', 'type': 'String' } ], 'class': 'p5.XML', 'module': 'IO' }, 'hasChildren': { 'name': 'hasChildren', 'class': 'p5.XML', 'module': 'IO' }, 'listChildren': { 'name': 'listChildren', 'class': 'p5.XML', 'module': 'IO' }, 'getChildren': { 'name': 'getChildren', 'params': [ { 'name': 'name', 'description': 'element name
\n', 'type': 'String', 'optional': true } ], 'class': 'p5.XML', 'module': 'IO' }, 'getChild': { 'name': 'getChild', 'params': [ { 'name': 'name', 'description': 'element name or index
\n', 'type': 'String|Integer' } ], 'class': 'p5.XML', 'module': 'IO' }, 'addChild': { 'name': 'addChild', 'params': [ { 'name': 'node', 'description': 'a p5.XML Object which will be the child to be added
\n', 'type': 'p5.XML' } ], 'class': 'p5.XML', 'module': 'IO' }, 'removeChild': { 'name': 'removeChild', 'params': [ { 'name': 'name', 'description': 'element name or index
\n', 'type': 'String|Integer' } ], 'class': 'p5.XML', 'module': 'IO' }, 'getAttributeCount': { 'name': 'getAttributeCount', 'class': 'p5.XML', 'module': 'IO' }, 'listAttributes': { 'name': 'listAttributes', 'class': 'p5.XML', 'module': 'IO' }, 'hasAttribute': { 'name': 'hasAttribute', 'params': [ { 'name': 'the', 'description': 'attribute to be checked
\n', 'type': 'String' } ], 'class': 'p5.XML', 'module': 'IO' }, 'getNum': { 'name': 'getNum', 'params': [ { 'name': 'name', 'description': 'the non-null full name of the attribute
\n', 'type': 'String' }, { 'name': 'defaultValue', 'description': 'the default value of the attribute
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.XML', 'module': 'IO' }, 'getString': { 'name': 'getString', 'params': [ { 'name': 'name', 'description': 'the non-null full name of the attribute
\n', 'type': 'String' }, { 'name': 'defaultValue', 'description': 'the default value of the attribute
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.XML', 'module': 'IO' }, 'setAttribute': { 'name': 'setAttribute', 'params': [ { 'name': 'name', 'description': 'the full name of the attribute
\n', 'type': 'String' }, { 'name': 'value', 'description': 'the value of the attribute
\n', 'type': 'Number|String|Boolean' } ], 'class': 'p5.XML', 'module': 'IO' }, 'getContent': { 'name': 'getContent', 'params': [ { 'name': 'defaultValue', 'description': 'value returned if no content is found
\n', 'type': 'String', 'optional': true } ], 'class': 'p5.XML', 'module': 'IO' }, 'setContent': { 'name': 'setContent', 'params': [ { 'name': 'text', 'description': 'the new content
\n', 'type': 'String' } ], 'class': 'p5.XML', 'module': 'IO' }, 'serialize': { 'name': 'serialize', 'class': 'p5.XML', 'module': 'IO' } }, 'p5.Vector': { 'x': { 'name': 'x', 'class': 'p5.Vector', 'module': 'Math' }, 'y': { 'name': 'y', 'class': 'p5.Vector', 'module': 'Math' }, 'z': { 'name': 'z', 'class': 'p5.Vector', 'module': 'Math' }, 'toString': { 'name': 'toString', 'class': 'p5.Vector', 'module': 'Math' }, 'set': { 'name': 'set', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'x component of the vector.
\n', 'type': 'Number', 'optional': true }, { 'name': 'y', 'description': 'y component of the vector.
\n', 'type': 'Number', 'optional': true }, { 'name': 'z', 'description': 'z component of the vector.
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'value', 'description': 'vector to set.
\n', 'type': 'p5.Vector|Number[]' } ], 'chainable': 1 } ] }, 'copy': { 'name': 'copy', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'v', 'description': 'the p5.Vector to create a copy of
\n', 'type': 'p5.Vector' } ], 'static': 1 } ] }, 'add': { 'name': 'add', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'x component of the vector to be added.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y component of the vector to be added.
\n', 'type': 'Number', 'optional': true }, { 'name': 'z', 'description': 'z component of the vector to be added.
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'value', 'description': 'The vector to add
\n', 'type': 'p5.Vector|Number[]' } ], 'chainable': 1 }, { 'params': [ { 'name': 'v1', 'description': 'A p5.Vector to add
\n', 'type': 'p5.Vector' }, { 'name': 'v2', 'description': 'A p5.Vector to add
\n', 'type': 'p5.Vector' }, { 'name': 'target', 'description': 'vector to receive the result.
\n', 'type': 'p5.Vector', 'optional': true } ], 'static': 1 } ] }, 'rem': { 'name': 'rem', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'x component of divisor vector.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y component of divisor vector.
\n', 'type': 'Number' }, { 'name': 'z', 'description': 'z component of divisor vector.
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'value', 'description': 'divisor vector.
\n', 'type': 'p5.Vector | Number[]' } ], 'chainable': 1 }, { 'params': [ { 'name': 'v1', 'description': 'The dividend p5.Vector
\n', 'type': 'p5.Vector' }, { 'name': 'v2', 'description': 'The divisor p5.Vector
\n', 'type': 'p5.Vector' } ], 'static': 1 }, { 'params': [ { 'name': 'v1', 'description': '', 'type': 'p5.Vector' }, { 'name': 'v2', 'description': '', 'type': 'p5.Vector' } ], 'static': 1 } ] }, 'sub': { 'name': 'sub', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'x component of the vector to subtract.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y component of the vector to subtract.
\n', 'type': 'Number', 'optional': true }, { 'name': 'z', 'description': 'z component of the vector to subtract.
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'value', 'description': 'the vector to subtract
\n', 'type': 'p5.Vector|Number[]' } ], 'chainable': 1 }, { 'params': [ { 'name': 'v1', 'description': 'A p5.Vector to subtract from
\n', 'type': 'p5.Vector' }, { 'name': 'v2', 'description': 'A p5.Vector to subtract
\n', 'type': 'p5.Vector' }, { 'name': 'target', 'description': 'vector to receive the result.
\n', 'type': 'p5.Vector', 'optional': true } ], 'static': 1 } ] }, 'mult': { 'name': 'mult', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'n', 'description': 'The number to multiply with the vector
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'x', 'description': 'number to multiply with the x component of the vector.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'number to multiply with the y component of the vector.
\n', 'type': 'Number' }, { 'name': 'z', 'description': 'number to multiply with the z component of the vector.
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'arr', 'description': 'array to multiply with the components of the vector.
\n', 'type': 'Number[]' } ], 'chainable': 1 }, { 'params': [ { 'name': 'v', 'description': 'vector to multiply with the components of the original vector.
\n', 'type': 'p5.Vector' } ], 'chainable': 1 }, { 'params': [ { 'name': 'x', 'description': '', 'type': 'Number' }, { 'name': 'y', 'description': '', 'type': 'Number' }, { 'name': 'z', 'description': '', 'type': 'Number', 'optional': true } ], 'static': 1 }, { 'params': [ { 'name': 'v', 'description': '', 'type': 'p5.Vector' }, { 'name': 'n', 'description': '', 'type': 'Number' }, { 'name': 'target', 'description': 'vector to receive the result.
\n', 'type': 'p5.Vector', 'optional': true } ], 'static': 1 }, { 'params': [ { 'name': 'v0', 'description': '', 'type': 'p5.Vector' }, { 'name': 'v1', 'description': '', 'type': 'p5.Vector' }, { 'name': 'target', 'description': '', 'type': 'p5.Vector', 'optional': true } ], 'static': 1 }, { 'params': [ { 'name': 'v0', 'description': '', 'type': 'p5.Vector' }, { 'name': 'arr', 'description': '', 'type': 'Number[]' }, { 'name': 'target', 'description': '', 'type': 'p5.Vector', 'optional': true } ], 'static': 1 } ] }, 'div': { 'name': 'div', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'n', 'description': 'The number to divide the vector by
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'x', 'description': 'number to divide with the x component of the vector.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'number to divide with the y component of the vector.
\n', 'type': 'Number' }, { 'name': 'z', 'description': 'number to divide with the z component of the vector.
\n', 'type': 'Number', 'optional': true } ], 'chainable': 1 }, { 'params': [ { 'name': 'arr', 'description': 'array to divide the components of the vector by.
\n', 'type': 'Number[]' } ], 'chainable': 1 }, { 'params': [ { 'name': 'v', 'description': 'vector to divide the components of the original vector by.
\n', 'type': 'p5.Vector' } ], 'chainable': 1 }, { 'params': [ { 'name': 'x', 'description': '', 'type': 'Number' }, { 'name': 'y', 'description': '', 'type': 'Number' }, { 'name': 'z', 'description': '', 'type': 'Number', 'optional': true } ], 'static': 1 }, { 'params': [ { 'name': 'v', 'description': '', 'type': 'p5.Vector' }, { 'name': 'n', 'description': '', 'type': 'Number' }, { 'name': 'target', 'description': 'The vector to receive the result
\n', 'type': 'p5.Vector', 'optional': true } ], 'static': 1 }, { 'params': [ { 'name': 'v0', 'description': '', 'type': 'p5.Vector' }, { 'name': 'v1', 'description': '', 'type': 'p5.Vector' }, { 'name': 'target', 'description': '', 'type': 'p5.Vector', 'optional': true } ], 'static': 1 }, { 'params': [ { 'name': 'v0', 'description': '', 'type': 'p5.Vector' }, { 'name': 'arr', 'description': '', 'type': 'Number[]' }, { 'name': 'target', 'description': '', 'type': 'p5.Vector', 'optional': true } ], 'static': 1 } ] }, 'mag': { 'name': 'mag', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'vecT', 'description': 'The vector to return the magnitude of
\n', 'type': 'p5.Vector' } ], 'static': 1 } ] }, 'magSq': { 'name': 'magSq', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'vecT', 'description': 'the vector to return the squared magnitude of
\n', 'type': 'p5.Vector' } ], 'static': 1 } ] }, 'dot': { 'name': 'dot', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'x component of the vector.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y component of the vector.
\n', 'type': 'Number', 'optional': true }, { 'name': 'z', 'description': 'z component of the vector.
\n', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'v', 'description': 'p5.Vector to be dotted.
\n', 'type': 'p5.Vector' } ] }, { 'params': [ { 'name': 'v1', 'description': 'first p5.Vector.
\n', 'type': 'p5.Vector' }, { 'name': 'v2', 'description': 'second p5.Vector.
\n', 'type': 'p5.Vector' } ], 'static': 1 } ] }, 'cross': { 'name': 'cross', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'v', 'description': 'p5.Vector to be crossed.
\n', 'type': 'p5.Vector' } ] }, { 'params': [ { 'name': 'v1', 'description': 'first p5.Vector.
\n', 'type': 'p5.Vector' }, { 'name': 'v2', 'description': 'second p5.Vector.
\n', 'type': 'p5.Vector' } ], 'static': 1 } ] }, 'dist': { 'name': 'dist', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'v', 'description': 'x, y, and z coordinates of a p5.Vector.
\n', 'type': 'p5.Vector' } ] }, { 'params': [ { 'name': 'v1', 'description': 'The first p5.Vector
\n', 'type': 'p5.Vector' }, { 'name': 'v2', 'description': 'The second p5.Vector
\n', 'type': 'p5.Vector' } ], 'static': 1 } ] }, 'normalize': { 'name': 'normalize', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'v', 'description': 'The vector to normalize
\n', 'type': 'p5.Vector' }, { 'name': 'target', 'description': 'The vector to receive the result
\n', 'type': 'p5.Vector', 'optional': true } ], 'static': 1 } ] }, 'limit': { 'name': 'limit', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'max', 'description': 'maximum magnitude for the vector.
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'v', 'description': 'the vector to limit
\n', 'type': 'p5.Vector' }, { 'name': 'max', 'description': '', 'type': 'Number' }, { 'name': 'target', 'description': 'the vector to receive the result (Optional)
\n', 'type': 'p5.Vector', 'optional': true } ], 'static': 1 } ] }, 'setMag': { 'name': 'setMag', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'len', 'description': 'new length for this vector.
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'v', 'description': 'the vector to set the magnitude of
\n', 'type': 'p5.Vector' }, { 'name': 'len', 'description': '', 'type': 'Number' }, { 'name': 'target', 'description': 'the vector to receive the result (Optional)
\n', 'type': 'p5.Vector', 'optional': true } ], 'static': 1 } ] }, 'heading': { 'name': 'heading', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'v', 'description': 'the vector to find the angle of
\n', 'type': 'p5.Vector' } ], 'static': 1 } ] }, 'setHeading': { 'name': 'setHeading', 'params': [ { 'name': 'angle', 'description': 'angle of rotation.
\n', 'type': 'Number' } ], 'class': 'p5.Vector', 'module': 'Math' }, 'rotate': { 'name': 'rotate', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'angle', 'description': 'angle of rotation.
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'v', 'description': '', 'type': 'p5.Vector' }, { 'name': 'angle', 'description': '', 'type': 'Number' }, { 'name': 'target', 'description': 'The vector to receive the result
\n', 'type': 'p5.Vector', 'optional': true } ], 'static': 1 } ] }, 'angleBetween': { 'name': 'angleBetween', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'value', 'description': 'x, y, and z components of a p5.Vector.
\n', 'type': 'p5.Vector' } ] }, { 'params': [ { 'name': 'v1', 'description': 'the first vector.
\n', 'type': 'p5.Vector' }, { 'name': 'v2', 'description': 'the second vector.
\n', 'type': 'p5.Vector' } ], 'static': 1 } ] }, 'lerp': { 'name': 'lerp', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'x component.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y component.
\n', 'type': 'Number' }, { 'name': 'z', 'description': 'z component.
\n', 'type': 'Number' }, { 'name': 'amt', 'description': 'amount of interpolation between 0.0 (old vector)\n and 1.0 (new vector). 0.5 is halfway between.
\n', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'v', 'description': 'p5.Vector to lerp toward.
\n', 'type': 'p5.Vector' }, { 'name': 'amt', 'description': '', 'type': 'Number' } ], 'chainable': 1 }, { 'params': [ { 'name': 'v1', 'description': '', 'type': 'p5.Vector' }, { 'name': 'v2', 'description': '', 'type': 'p5.Vector' }, { 'name': 'amt', 'description': '', 'type': 'Number' }, { 'name': 'target', 'description': 'The vector to receive the result
\n', 'type': 'p5.Vector', 'optional': true } ], 'static': 1 } ] }, 'slerp': { 'name': 'slerp', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'v', 'description': 'p5.Vector to slerp toward.
\n', 'type': 'p5.Vector' }, { 'name': 'amt', 'description': 'amount of interpolation between 0.0 (old vector)\n and 1.0 (new vector). 0.5 is halfway between.
\n', 'type': 'Number' } ] }, { 'params': [ { 'name': 'v1', 'description': 'old vector.
\n', 'type': 'p5.Vector' }, { 'name': 'v2', 'description': 'new vector.
\n', 'type': 'p5.Vector' }, { 'name': 'amt', 'description': '', 'type': 'Number' }, { 'name': 'target', 'description': 'vector to receive the result.
\n', 'type': 'p5.Vector', 'optional': true } ], 'static': 1 } ] }, 'reflect': { 'name': 'reflect', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'surfaceNormal', 'description': 'p5.Vector\n to reflect about.
\n', 'type': 'p5.Vector' } ], 'chainable': 1 }, { 'params': [ { 'name': 'incidentVector', 'description': 'vector to be reflected.
\n', 'type': 'p5.Vector' }, { 'name': 'surfaceNormal', 'description': '', 'type': 'p5.Vector' }, { 'name': 'target', 'description': 'vector to receive the result.
\n', 'type': 'p5.Vector', 'optional': true } ], 'static': 1 } ] }, 'array': { 'name': 'array', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ ] }, { 'params': [ { 'name': 'v', 'description': 'the vector to convert to an array
\n', 'type': 'p5.Vector' } ], 'static': 1 } ] }, 'equals': { 'name': 'equals', 'class': 'p5.Vector', 'module': 'Math', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'x component of the vector.
\n', 'type': 'Number', 'optional': true }, { 'name': 'y', 'description': 'y component of the vector.
\n', 'type': 'Number', 'optional': true }, { 'name': 'z', 'description': 'z component of the vector.
\n', 'type': 'Number', 'optional': true } ] }, { 'params': [ { 'name': 'value', 'description': 'vector to compare.
\n', 'type': 'p5.Vector|Array' } ] }, { 'params': [ { 'name': 'v1', 'description': 'the first vector to compare
\n', 'type': 'p5.Vector|Array' }, { 'name': 'v2', 'description': 'the second vector to compare
\n', 'type': 'p5.Vector|Array' } ], 'static': 1 } ] }, 'fromAngle': { 'name': 'fromAngle', 'params': [ { 'name': 'angle', 'description': 'desired angle, in radians. Unaffected by angleMode().
\n', 'type': 'Number' }, { 'name': 'length', 'description': 'length of the new vector (defaults to 1).
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Vector', 'module': 'Math' }, 'fromAngles': { 'name': 'fromAngles', 'params': [ { 'name': 'theta', 'description': 'polar angle in radians (zero is up).
\n', 'type': 'Number' }, { 'name': 'phi', 'description': 'azimuthal angle in radians\n (zero is out of the screen).
\n', 'type': 'Number' }, { 'name': 'length', 'description': 'length of the new vector (defaults to 1).
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Vector', 'module': 'Math' }, 'random2D': { 'name': 'random2D', 'class': 'p5.Vector', 'module': 'Math' }, 'random3D': { 'name': 'random3D', 'class': 'p5.Vector', 'module': 'Math' } }, 'p5.Font': { 'font': { 'name': 'font', 'class': 'p5.Font', 'module': 'Typography' }, 'textBounds': { 'name': 'textBounds', 'params': [ { 'name': 'str', 'description': 'string of text.
\n', 'type': 'String' }, { 'name': 'x', 'description': 'x-coordinate of the text.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the text.
\n', 'type': 'Number' }, { 'name': 'fontSize', 'description': 'font size. Defaults to the current\n textSize().
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Font', 'module': 'Typography' }, 'textToPoints': { 'name': 'textToPoints', 'params': [ { 'name': 'str', 'description': 'string of text.
\n', 'type': 'String' }, { 'name': 'x', 'description': 'x-coordinate of the text.
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the text.
\n', 'type': 'Number' }, { 'name': 'fontSize', 'description': 'font size. Defaults to the current\n textSize().
\n', 'type': 'Number', 'optional': true }, { 'name': 'options', 'description': 'object with sampleFactor and simplifyThreshold\n properties.
\n', 'type': 'Object', 'optional': true } ], 'class': 'p5.Font', 'module': 'Typography' } }, 'p5.Camera': { 'eyeX': { 'name': 'eyeX', 'class': 'p5.Camera', 'module': '3D' }, 'eyeY': { 'name': 'eyeY', 'class': 'p5.Camera', 'module': '3D' }, 'eyeZ': { 'name': 'eyeZ', 'class': 'p5.Camera', 'module': '3D' }, 'centerX': { 'name': 'centerX', 'class': 'p5.Camera', 'module': '3D' }, 'centerY': { 'name': 'centerY', 'class': 'p5.Camera', 'module': '3D' }, 'centerZ': { 'name': 'centerZ', 'class': 'p5.Camera', 'module': '3D' }, 'upX': { 'name': 'upX', 'class': 'p5.Camera', 'module': '3D' }, 'upY': { 'name': 'upY', 'class': 'p5.Camera', 'module': '3D' }, 'upZ': { 'name': 'upZ', 'class': 'p5.Camera', 'module': '3D' }, 'perspective': { 'name': 'perspective', 'class': 'p5.Camera', 'module': '3D' }, 'ortho': { 'name': 'ortho', 'class': 'p5.Camera', 'module': '3D' }, 'frustum': { 'name': 'frustum', 'class': 'p5.Camera', 'module': '3D' }, 'pan': { 'name': 'pan', 'params': [ { 'name': 'angle', 'description': 'amount to rotate camera in current\nangleMode units.\nGreater than 0 values rotate counterclockwise (to the left).
\n', 'type': 'Number' } ], 'class': 'p5.Camera', 'module': '3D' }, 'tilt': { 'name': 'tilt', 'params': [ { 'name': 'angle', 'description': 'amount to rotate camera in current\nangleMode units.\nGreater than 0 values rotate counterclockwise (to the left).
\n', 'type': 'Number' } ], 'class': 'p5.Camera', 'module': '3D' }, 'lookAt': { 'name': 'lookAt', 'params': [ { 'name': 'x', 'description': 'x position of a point in world space
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y position of a point in world space
\n', 'type': 'Number' }, { 'name': 'z', 'description': 'z position of a point in world space
\n', 'type': 'Number' } ], 'class': 'p5.Camera', 'module': '3D' }, 'camera': { 'name': 'camera', 'class': 'p5.Camera', 'module': '3D' }, 'move': { 'name': 'move', 'params': [ { 'name': 'x', 'description': 'amount to move along camera\'s left-right axis
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'amount to move along camera\'s up-down axis
\n', 'type': 'Number' }, { 'name': 'z', 'description': 'amount to move along camera\'s forward-backward axis
\n', 'type': 'Number' } ], 'class': 'p5.Camera', 'module': '3D' }, 'setPosition': { 'name': 'setPosition', 'params': [ { 'name': 'x', 'description': 'x position of a point in world space
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y position of a point in world space
\n', 'type': 'Number' }, { 'name': 'z', 'description': 'z position of a point in world space
\n', 'type': 'Number' } ], 'class': 'p5.Camera', 'module': '3D' }, 'set': { 'name': 'set', 'params': [ { 'name': 'cam', 'description': 'source camera
\n', 'type': 'p5.Camera' } ], 'class': 'p5.Camera', 'module': '3D' }, 'slerp': { 'name': 'slerp', 'params': [ { 'name': 'cam0', 'description': 'first p5.Camera
\n', 'type': 'p5.Camera' }, { 'name': 'cam1', 'description': 'second p5.Camera
\n', 'type': 'p5.Camera' }, { 'name': 'amt', 'description': 'amount to use for interpolation during slerp
\n', 'type': 'Number' } ], 'class': 'p5.Camera', 'module': '3D' } }, 'p5.Framebuffer': { 'pixels': { 'name': 'pixels', 'class': 'p5.Framebuffer', 'module': 'Rendering' }, 'resize': { 'name': 'resize', 'params': [ { 'name': 'width', 'description': '', 'type': 'Number' }, { 'name': 'height', 'description': '', 'type': 'Number' } ], 'class': 'p5.Framebuffer', 'module': 'Rendering' }, 'pixelDensity': { 'name': 'pixelDensity', 'params': [ { 'name': 'density', 'description': 'A scaling factor for the number of pixels per\nside of the framebuffer
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Framebuffer', 'module': 'Rendering' }, 'autoSized': { 'name': 'autoSized', 'params': [ { 'name': 'autoSized', 'description': 'Whether or not the framebuffer should resize\nalong with the canvas it\'s attached to
\n', 'type': 'Boolean', 'optional': true } ], 'class': 'p5.Framebuffer', 'module': 'Rendering' }, 'createCamera': { 'name': 'createCamera', 'class': 'p5.Framebuffer', 'module': 'Rendering' }, 'remove': { 'name': 'remove', 'class': 'p5.Framebuffer', 'module': 'Rendering' }, 'begin': { 'name': 'begin', 'class': 'p5.Framebuffer', 'module': 'Rendering' }, 'end': { 'name': 'end', 'class': 'p5.Framebuffer', 'module': 'Rendering' }, 'draw': { 'name': 'draw', 'params': [ { 'name': 'callback', 'description': 'A function to run that draws to the canvas. The\nfunction will immediately be run, but it will draw to the framebuffer\ninstead of the canvas.
\n', 'type': 'Function' } ], 'class': 'p5.Framebuffer', 'module': 'Rendering' }, 'get': { 'name': 'get', 'class': 'p5.Framebuffer', 'module': 'Rendering', 'overloads': [ { 'params': [ { 'name': 'x', 'description': 'x-coordinate of the pixel
\n', 'type': 'Number' }, { 'name': 'y', 'description': 'y-coordinate of the pixel
\n', 'type': 'Number' }, { 'name': 'w', 'description': 'width of the section to be returned
\n', 'type': 'Number' }, { 'name': 'h', 'description': 'height of the section to be returned
\n', 'type': 'Number' } ] }, { 'params': [ ] }, { 'params': [ { 'name': 'x', 'description': '', 'type': 'Number' }, { 'name': 'y', 'description': '', 'type': 'Number' } ] } ] }, 'color': { 'name': 'color', 'class': 'p5.Framebuffer', 'module': 'Rendering' }, 'depth': { 'name': 'depth', 'class': 'p5.Framebuffer', 'module': 'Rendering' } }, 'p5.Geometry': { 'clearColors': { 'name': 'clearColors', 'class': 'p5.Geometry', 'module': 'Shape' }, 'flipU': { 'name': 'flipU', 'class': 'p5.Geometry', 'module': 'Shape' }, 'flipV': { 'name': 'flipV', 'class': 'p5.Geometry', 'module': 'Shape' }, 'computeFaces': { 'name': 'computeFaces', 'class': 'p5.Geometry', 'module': 'Shape' }, 'computeNormals': { 'name': 'computeNormals', 'params': [ { 'name': 'shadingType', 'description': 'shading type (FLAT for flat shading or SMOOTH for smooth shading) for buildGeometry() outputs. Defaults to FLAT.
An optional object with configuration.
\n', 'type': 'Object', 'optional': true } ], 'class': 'p5.Geometry', 'module': 'Shape' }, 'averageNormals': { 'name': 'averageNormals', 'class': 'p5.Geometry', 'module': 'Shape' }, 'averagePoleNormals': { 'name': 'averagePoleNormals', 'class': 'p5.Geometry', 'module': 'Shape' }, 'normalize': { 'name': 'normalize', 'class': 'p5.Geometry', 'module': 'Shape' } }, 'p5.Shader': { 'copyToContext': { 'name': 'copyToContext', 'params': [ { 'name': 'context', 'description': 'The graphic or instance to copy this shader to.\nPass window if you need to copy to the main canvas.
the name of the uniform.\nMust correspond to the name used in the vertex and fragment shaders
\n', 'type': 'String' }, { 'name': 'data', 'description': 'The value to assign to the uniform. This can be\na boolean (true/false), a number, an array of numbers, or\nan image (p5.Image, p5.Graphics, p5.MediaElement, p5.Texture)
\n', 'type': 'Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture' } ], 'class': 'p5.Shader', 'module': '3D' } }, 'p5.SoundFile': { 'isLoaded': { 'name': 'isLoaded', 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'play': { 'name': 'play', 'params': [ { 'name': 'startTime', 'description': '(optional) schedule playback to start (in seconds from now).
\n', 'type': 'Number', 'optional': true }, { 'name': 'rate', 'description': '(optional) playback rate
\n', 'type': 'Number', 'optional': true }, { 'name': 'amp', 'description': '(optional) amplitude (volume)\n of playback
\n', 'type': 'Number', 'optional': true }, { 'name': 'cueStart', 'description': '(optional) cue start time in seconds
\n', 'type': 'Number', 'optional': true }, { 'name': 'duration', 'description': '(optional) duration of playback in seconds
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'playMode': { 'name': 'playMode', 'params': [ { 'name': 'str', 'description': '\'restart\' or \'sustain\' or \'untilDone\'
\n', 'type': 'String' } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'pause': { 'name': 'pause', 'params': [ { 'name': 'startTime', 'description': '(optional) schedule event to occur\n seconds from now
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'loop': { 'name': 'loop', 'params': [ { 'name': 'startTime', 'description': '(optional) schedule event to occur\n seconds from now
\n', 'type': 'Number', 'optional': true }, { 'name': 'rate', 'description': '(optional) playback rate
\n', 'type': 'Number', 'optional': true }, { 'name': 'amp', 'description': '(optional) playback volume
\n', 'type': 'Number', 'optional': true }, { 'name': 'cueLoopStart', 'description': '(optional) startTime in seconds
\n', 'type': 'Number', 'optional': true }, { 'name': 'duration', 'description': '(optional) loop duration in seconds
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'setLoop': { 'name': 'setLoop', 'params': [ { 'name': 'Boolean', 'description': 'set looping to true or false
\n', 'type': 'Boolean' } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'isLooping': { 'name': 'isLooping', 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'isPlaying': { 'name': 'isPlaying', 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'isPaused': { 'name': 'isPaused', 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'stop': { 'name': 'stop', 'params': [ { 'name': 'startTime', 'description': '(optional) schedule event to occur\n in seconds from now
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'pan': { 'name': 'pan', 'params': [ { 'name': 'panValue', 'description': 'Set the stereo panner
\n', 'type': 'Number', 'optional': true }, { 'name': 'timeFromNow', 'description': 'schedule this event to happen\n seconds from now
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'getPan': { 'name': 'getPan', 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'rate': { 'name': 'rate', 'params': [ { 'name': 'playbackRate', 'description': 'Set the playback rate. 1.0 is normal,\n .5 is half-speed, 2.0 is twice as fast.\n Values less than zero play backwards.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'setVolume': { 'name': 'setVolume', 'params': [ { 'name': 'volume', 'description': 'Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator
\n', 'type': 'Number|Object' }, { 'name': 'rampTime', 'description': 'Fade for t seconds
\n', 'type': 'Number', 'optional': true }, { 'name': 'timeFromNow', 'description': 'Schedule this event to happen at\n t seconds in the future
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'duration': { 'name': 'duration', 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'currentTime': { 'name': 'currentTime', 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'jump': { 'name': 'jump', 'params': [ { 'name': 'cueTime', 'description': 'cueTime of the soundFile in seconds.
\n', 'type': 'Number' }, { 'name': 'duration', 'description': 'duration in seconds.
\n', 'type': 'Number' } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'channels': { 'name': 'channels', 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'sampleRate': { 'name': 'sampleRate', 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'frames': { 'name': 'frames', 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'getPeaks': { 'name': 'getPeaks', 'params': [ { 'name': 'length', 'description': 'length is the size of the returned array.\n Larger length results in more precision.\n Defaults to 5*width of the browser window.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'reverseBuffer': { 'name': 'reverseBuffer', 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'onended': { 'name': 'onended', 'params': [ { 'name': 'callback', 'description': 'function to call when the\n soundfile has ended.
\n', 'type': 'Function' } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'connect': { 'name': 'connect', 'params': [ { 'name': 'object', 'description': 'Audio object that accepts an input
\n', 'type': 'Object', 'optional': true } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'disconnect': { 'name': 'disconnect', 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'setPath': { 'name': 'setPath', 'params': [ { 'name': 'path', 'description': 'path to audio file
\n', 'type': 'String' }, { 'name': 'callback', 'description': 'Callback
\n', 'type': 'Function' } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'setBuffer': { 'name': 'setBuffer', 'params': [ { 'name': 'buf', 'description': 'Array of Float32 Array(s). 2 Float32 Arrays\n will create a stereo source. 1 will create\n a mono source.
\n', 'type': 'Array' } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'addCue': { 'name': 'addCue', 'params': [ { 'name': 'time', 'description': 'Time in seconds, relative to this media\n element\'s playback. For example, to trigger\n an event every time playback reaches two\n seconds, pass in the number 2. This will be\n passed as the first parameter to\n the callback function.
\n', 'type': 'Number' }, { 'name': 'callback', 'description': 'Name of a function that will be\n called at the given time. The callback will\n receive time and (optionally) param as its\n two parameters.
\n', 'type': 'Function' }, { 'name': 'value', 'description': 'An object to be passed as the\n second parameter to the\n callback function.
\n', 'type': 'Object', 'optional': true } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'removeCue': { 'name': 'removeCue', 'params': [ { 'name': 'id', 'description': 'ID of the cue, as returned by addCue
\n', 'type': 'Number' } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'clearCues': { 'name': 'clearCues', 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'save': { 'name': 'save', 'params': [ { 'name': 'fileName', 'description': 'name of the resulting .wav file.
\n', 'type': 'String', 'optional': true } ], 'class': 'p5.SoundFile', 'module': 'p5.sound' }, 'getBlob': { 'name': 'getBlob', 'class': 'p5.SoundFile', 'module': 'p5.sound' } }, 'p5.Amplitude': { 'setInput': { 'name': 'setInput', 'params': [ { 'name': 'snd', 'description': 'set the sound source\n (optional, defaults to\n main output)
\n', 'type': 'SoundObject|undefined', 'optional': true }, { 'name': 'smoothing', 'description': 'a range between 0.0 and 1.0\n to smooth amplitude readings
\n', 'type': 'Number|undefined', 'optional': true } ], 'class': 'p5.Amplitude', 'module': 'p5.sound' }, 'getLevel': { 'name': 'getLevel', 'params': [ { 'name': 'channel', 'description': 'Optionally return only channel 0 (left) or 1 (right)
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Amplitude', 'module': 'p5.sound' }, 'toggleNormalize': { 'name': 'toggleNormalize', 'params': [ { 'name': 'boolean', 'description': 'set normalize to true (1) or false (0)
\n', 'type': 'Boolean', 'optional': true } ], 'class': 'p5.Amplitude', 'module': 'p5.sound' }, 'smooth': { 'name': 'smooth', 'params': [ { 'name': 'set', 'description': 'smoothing from 0.0 <= 1
\n', 'type': 'Number' } ], 'class': 'p5.Amplitude', 'module': 'p5.sound' } }, 'p5.FFT': { 'setInput': { 'name': 'setInput', 'params': [ { 'name': 'source', 'description': 'p5.sound object (or web audio API source node)
\n', 'type': 'Object', 'optional': true } ], 'class': 'p5.FFT', 'module': 'p5.sound' }, 'waveform': { 'name': 'waveform', 'params': [ { 'name': 'bins', 'description': 'Must be a power of two between\n 16 and 1024. Defaults to 1024.
\n', 'type': 'Number', 'optional': true }, { 'name': 'precision', 'description': 'If any value is provided, will return results\n in a Float32 Array which is more precise\n than a regular array.
\n', 'type': 'String', 'optional': true } ], 'class': 'p5.FFT', 'module': 'p5.sound' }, 'analyze': { 'name': 'analyze', 'params': [ { 'name': 'bins', 'description': 'Must be a power of two between\n 16 and 1024. Defaults to 1024.
\n', 'type': 'Number', 'optional': true }, { 'name': 'scale', 'description': 'If "dB," returns decibel\n float measurements between\n -140 and 0 (max).\n Otherwise returns integers from 0-255.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.FFT', 'module': 'p5.sound' }, 'getEnergy': { 'name': 'getEnergy', 'params': [ { 'name': 'frequency1', 'description': 'Will return a value representing\n energy at this frequency. Alternately,\n the strings "bass", "lowMid" "mid",\n "highMid", and "treble" will return\n predefined frequency ranges.
\n', 'type': 'Number|String' }, { 'name': 'frequency2', 'description': 'If a second frequency is given,\n will return average amount of\n energy that exists between the\n two frequencies.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.FFT', 'module': 'p5.sound' }, 'getCentroid': { 'name': 'getCentroid', 'class': 'p5.FFT', 'module': 'p5.sound' }, 'smooth': { 'name': 'smooth', 'params': [ { 'name': 'smoothing', 'description': '0.0 < smoothing < 1.0.\n Defaults to 0.8.
\n', 'type': 'Number' } ], 'class': 'p5.FFT', 'module': 'p5.sound' }, 'linAverages': { 'name': 'linAverages', 'params': [ { 'name': 'N', 'description': 'Number of returned frequency groups
\n', 'type': 'Number' } ], 'class': 'p5.FFT', 'module': 'p5.sound' }, 'logAverages': { 'name': 'logAverages', 'params': [ { 'name': 'octaveBands', 'description': 'Array of Octave Bands objects for grouping
\n', 'type': 'Array' } ], 'class': 'p5.FFT', 'module': 'p5.sound' }, 'getOctaveBands': { 'name': 'getOctaveBands', 'params': [ { 'name': 'N', 'description': 'Specifies the 1/N type of generated octave bands
\n', 'type': 'Number' }, { 'name': 'fCtr0', 'description': 'Minimum central frequency for the lowest band
\n', 'type': 'Number' } ], 'class': 'p5.FFT', 'module': 'p5.sound' } }, 'p5.Oscillator': { 'start': { 'name': 'start', 'params': [ { 'name': 'time', 'description': 'startTime in seconds from now.
\n', 'type': 'Number', 'optional': true }, { 'name': 'frequency', 'description': 'frequency in Hz.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Oscillator', 'module': 'p5.sound' }, 'stop': { 'name': 'stop', 'params': [ { 'name': 'secondsFromNow', 'description': 'Time, in seconds from now.
\n', 'type': 'Number' } ], 'class': 'p5.Oscillator', 'module': 'p5.sound' }, 'amp': { 'name': 'amp', 'params': [ { 'name': 'vol', 'description': 'between 0 and 1.0\n or a modulating signal/oscillator
\n', 'type': 'Number|Object' }, { 'name': 'rampTime', 'description': 'create a fade that lasts rampTime
\n', 'type': 'Number', 'optional': true }, { 'name': 'timeFromNow', 'description': 'schedule this event to happen\n seconds from now
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Oscillator', 'module': 'p5.sound' }, 'getAmp': { 'name': 'getAmp', 'class': 'p5.Oscillator', 'module': 'p5.sound' }, 'freq': { 'name': 'freq', 'params': [ { 'name': 'Frequency', 'description': 'Frequency in Hz\n or modulating signal/oscillator
\n', 'type': 'Number|Object' }, { 'name': 'rampTime', 'description': 'Ramp time (in seconds)
\n', 'type': 'Number', 'optional': true }, { 'name': 'timeFromNow', 'description': 'Schedule this event to happen\n at x seconds from now
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Oscillator', 'module': 'p5.sound' }, 'getFreq': { 'name': 'getFreq', 'class': 'p5.Oscillator', 'module': 'p5.sound' }, 'setType': { 'name': 'setType', 'params': [ { 'name': 'type', 'description': '\'sine\', \'triangle\', \'sawtooth\' or \'square\'.
\n', 'type': 'String' } ], 'class': 'p5.Oscillator', 'module': 'p5.sound' }, 'getType': { 'name': 'getType', 'class': 'p5.Oscillator', 'module': 'p5.sound' }, 'connect': { 'name': 'connect', 'params': [ { 'name': 'unit', 'description': 'A p5.sound or Web Audio object
\n', 'type': 'Object' } ], 'class': 'p5.Oscillator', 'module': 'p5.sound' }, 'disconnect': { 'name': 'disconnect', 'class': 'p5.Oscillator', 'module': 'p5.sound' }, 'pan': { 'name': 'pan', 'params': [ { 'name': 'panning', 'description': 'Number between -1 and 1
\n', 'type': 'Number' }, { 'name': 'timeFromNow', 'description': 'schedule this event to happen\n seconds from now
\n', 'type': 'Number' } ], 'class': 'p5.Oscillator', 'module': 'p5.sound' }, 'getPan': { 'name': 'getPan', 'class': 'p5.Oscillator', 'module': 'p5.sound' }, 'phase': { 'name': 'phase', 'params': [ { 'name': 'phase', 'description': 'float between 0.0 and 1.0
\n', 'type': 'Number' } ], 'class': 'p5.Oscillator', 'module': 'p5.sound' }, 'add': { 'name': 'add', 'params': [ { 'name': 'number', 'description': 'Constant number to add
\n', 'type': 'Number' } ], 'class': 'p5.Oscillator', 'module': 'p5.sound' }, 'mult': { 'name': 'mult', 'params': [ { 'name': 'number', 'description': 'Constant number to multiply
\n', 'type': 'Number' } ], 'class': 'p5.Oscillator', 'module': 'p5.sound' }, 'scale': { 'name': 'scale', 'params': [ { 'name': 'inMin', 'description': 'input range minumum
\n', 'type': 'Number' }, { 'name': 'inMax', 'description': 'input range maximum
\n', 'type': 'Number' }, { 'name': 'outMin', 'description': 'input range minumum
\n', 'type': 'Number' }, { 'name': 'outMax', 'description': 'input range maximum
\n', 'type': 'Number' } ], 'class': 'p5.Oscillator', 'module': 'p5.sound' } }, 'p5.Envelope': { 'attackTime': { 'name': 'attackTime', 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'attackLevel': { 'name': 'attackLevel', 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'decayTime': { 'name': 'decayTime', 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'decayLevel': { 'name': 'decayLevel', 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'releaseTime': { 'name': 'releaseTime', 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'releaseLevel': { 'name': 'releaseLevel', 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'set': { 'name': 'set', 'params': [ { 'name': 'attackTime', 'description': 'Time (in seconds) before level\n reaches attackLevel
\n', 'type': 'Number' }, { 'name': 'attackLevel', 'description': 'Typically an amplitude between\n 0.0 and 1.0
\n', 'type': 'Number' }, { 'name': 'decayTime', 'description': 'Time
\n', 'type': 'Number' }, { 'name': 'decayLevel', 'description': 'Amplitude (In a standard ADSR envelope,\n decayLevel = sustainLevel)
\n', 'type': 'Number' }, { 'name': 'releaseTime', 'description': 'Release Time (in seconds)
\n', 'type': 'Number' }, { 'name': 'releaseLevel', 'description': 'Amplitude
\n', 'type': 'Number' } ], 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'setADSR': { 'name': 'setADSR', 'params': [ { 'name': 'attackTime', 'description': 'Time (in seconds before envelope\n reaches Attack Level
\n', 'type': 'Number' }, { 'name': 'decayTime', 'description': 'Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n', 'type': 'Number', 'optional': true }, { 'name': 'susRatio', 'description': 'Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
Time in seconds from now (defaults to 0)
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'setRange': { 'name': 'setRange', 'params': [ { 'name': 'aLevel', 'description': 'attack level (defaults to 1)
\n', 'type': 'Number' }, { 'name': 'rLevel', 'description': 'release level (defaults to 0)
\n', 'type': 'Number' } ], 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'setInput': { 'name': 'setInput', 'params': [ { 'name': 'inputs', 'description': 'A p5.sound object or\n Web Audio Param.
\n', 'type': 'Object', 'optional': true, 'multiple': true } ], 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'setExp': { 'name': 'setExp', 'params': [ { 'name': 'isExp', 'description': 'true is exponential, false is linear
\n', 'type': 'Boolean' } ], 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'play': { 'name': 'play', 'params': [ { 'name': 'unit', 'description': 'A p5.sound object or\n Web Audio Param.
\n', 'type': 'Object' }, { 'name': 'startTime', 'description': 'time from now (in seconds) at which to play
\n', 'type': 'Number', 'optional': true }, { 'name': 'sustainTime', 'description': 'time to sustain before releasing the envelope
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'triggerAttack': { 'name': 'triggerAttack', 'params': [ { 'name': 'unit', 'description': 'p5.sound Object or Web Audio Param
\n', 'type': 'Object' }, { 'name': 'secondsFromNow', 'description': 'time from now (in seconds)
\n', 'type': 'Number' } ], 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'triggerRelease': { 'name': 'triggerRelease', 'params': [ { 'name': 'unit', 'description': 'p5.sound Object or Web Audio Param
\n', 'type': 'Object' }, { 'name': 'secondsFromNow', 'description': 'time to trigger the release
\n', 'type': 'Number' } ], 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'ramp': { 'name': 'ramp', 'params': [ { 'name': 'unit', 'description': 'p5.sound Object or Web Audio Param
\n', 'type': 'Object' }, { 'name': 'secondsFromNow', 'description': 'When to trigger the ramp
\n', 'type': 'Number' }, { 'name': 'v', 'description': 'Target value
\n', 'type': 'Number' }, { 'name': 'v2', 'description': 'Second target value
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'add': { 'name': 'add', 'params': [ { 'name': 'number', 'description': 'Constant number to add
\n', 'type': 'Number' } ], 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'mult': { 'name': 'mult', 'params': [ { 'name': 'number', 'description': 'Constant number to multiply
\n', 'type': 'Number' } ], 'class': 'p5.Envelope', 'module': 'p5.sound' }, 'scale': { 'name': 'scale', 'params': [ { 'name': 'inMin', 'description': 'input range minumum
\n', 'type': 'Number' }, { 'name': 'inMax', 'description': 'input range maximum
\n', 'type': 'Number' }, { 'name': 'outMin', 'description': 'input range minumum
\n', 'type': 'Number' }, { 'name': 'outMax', 'description': 'input range maximum
\n', 'type': 'Number' } ], 'class': 'p5.Envelope', 'module': 'p5.sound' } }, 'p5.Noise': { 'setType': { 'name': 'setType', 'params': [ { 'name': 'type', 'description': '\'white\', \'pink\' or \'brown\'
\n', 'type': 'String', 'optional': true } ], 'class': 'p5.Noise', 'module': 'p5.sound' } }, 'p5.Pulse': { 'width': { 'name': 'width', 'params': [ { 'name': 'width', 'description': 'Width between the pulses (0 to 1.0,\n defaults to 0)
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Pulse', 'module': 'p5.sound' } }, 'p5.AudioIn': { 'input': { 'name': 'input', 'class': 'p5.AudioIn', 'module': 'p5.sound' }, 'output': { 'name': 'output', 'class': 'p5.AudioIn', 'module': 'p5.sound' }, 'stream': { 'name': 'stream', 'class': 'p5.AudioIn', 'module': 'p5.sound' }, 'mediaStream': { 'name': 'mediaStream', 'class': 'p5.AudioIn', 'module': 'p5.sound' }, 'currentSource': { 'name': 'currentSource', 'class': 'p5.AudioIn', 'module': 'p5.sound' }, 'enabled': { 'name': 'enabled', 'class': 'p5.AudioIn', 'module': 'p5.sound' }, 'amplitude': { 'name': 'amplitude', 'class': 'p5.AudioIn', 'module': 'p5.sound' }, 'start': { 'name': 'start', 'params': [ { 'name': 'successCallback', 'description': 'Name of a function to call on\n success.
\n', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': 'Name of a function to call if\n there was an error. For example,\n some browsers do not support\n getUserMedia.
\n', 'type': 'Function', 'optional': true } ], 'class': 'p5.AudioIn', 'module': 'p5.sound' }, 'stop': { 'name': 'stop', 'class': 'p5.AudioIn', 'module': 'p5.sound' }, 'connect': { 'name': 'connect', 'params': [ { 'name': 'unit', 'description': 'An object that accepts audio input,\n such as an FFT
\n', 'type': 'Object', 'optional': true } ], 'class': 'p5.AudioIn', 'module': 'p5.sound' }, 'disconnect': { 'name': 'disconnect', 'class': 'p5.AudioIn', 'module': 'p5.sound' }, 'getLevel': { 'name': 'getLevel', 'params': [ { 'name': 'smoothing', 'description': 'Smoothing is 0.0 by default.\n Smooths values based on previous values.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.AudioIn', 'module': 'p5.sound' }, 'amp': { 'name': 'amp', 'params': [ { 'name': 'vol', 'description': 'between 0 and 1.0
\n', 'type': 'Number' }, { 'name': 'time', 'description': 'ramp time (optional)
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.AudioIn', 'module': 'p5.sound' }, 'getSources': { 'name': 'getSources', 'params': [ { 'name': 'successCallback', 'description': 'This callback function handles the sources when they\n have been enumerated. The callback function\n receives the deviceList array as its only argument
\n', 'type': 'Function', 'optional': true }, { 'name': 'errorCallback', 'description': 'This optional callback receives the error\n message as its argument.
\n', 'type': 'Function', 'optional': true } ], 'class': 'p5.AudioIn', 'module': 'p5.sound' }, 'setSource': { 'name': 'setSource', 'params': [ { 'name': 'num', 'description': 'position of input source in the array
\n', 'type': 'Number' } ], 'class': 'p5.AudioIn', 'module': 'p5.sound' } }, 'p5.Effect': { 'amp': { 'name': 'amp', 'params': [ { 'name': 'vol', 'description': 'amplitude between 0 and 1.0
\n', 'type': 'Number', 'optional': true }, { 'name': 'rampTime', 'description': 'create a fade that lasts until rampTime
\n', 'type': 'Number', 'optional': true }, { 'name': 'tFromNow', 'description': 'schedule this event to happen in tFromNow seconds
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Effect', 'module': 'p5.sound' }, 'chain': { 'name': 'chain', 'params': [ { 'name': 'arguments', 'description': 'Chain together multiple sound objects
\n', 'type': 'Object', 'optional': true } ], 'class': 'p5.Effect', 'module': 'p5.sound' }, 'drywet': { 'name': 'drywet', 'params': [ { 'name': 'fade', 'description': 'The desired drywet value (0 - 1.0)
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Effect', 'module': 'p5.sound' }, 'connect': { 'name': 'connect', 'params': [ { 'name': 'unit', 'description': '', 'type': 'Object' } ], 'class': 'p5.Effect', 'module': 'p5.sound' }, 'disconnect': { 'name': 'disconnect', 'class': 'p5.Effect', 'module': 'p5.sound' } }, 'p5.Filter': { 'biquadFilter': { 'name': 'biquadFilter', 'class': 'p5.Filter', 'module': 'p5.sound' }, 'process': { 'name': 'process', 'params': [ { 'name': 'Signal', 'description': 'An object that outputs audio
\n', 'type': 'Object' }, { 'name': 'freq', 'description': 'Frequency in Hz, from 10 to 22050
\n', 'type': 'Number', 'optional': true }, { 'name': 'res', 'description': 'Resonance/Width of the filter frequency\n from 0.001 to 1000
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Filter', 'module': 'p5.sound' }, 'set': { 'name': 'set', 'params': [ { 'name': 'freq', 'description': 'Frequency in Hz, from 10 to 22050
\n', 'type': 'Number', 'optional': true }, { 'name': 'res', 'description': 'Resonance (Q) from 0.001 to 1000
\n', 'type': 'Number', 'optional': true }, { 'name': 'timeFromNow', 'description': 'schedule this event to happen\n seconds from now
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Filter', 'module': 'p5.sound' }, 'freq': { 'name': 'freq', 'params': [ { 'name': 'freq', 'description': 'Filter Frequency
\n', 'type': 'Number' }, { 'name': 'timeFromNow', 'description': 'schedule this event to happen\n seconds from now
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Filter', 'module': 'p5.sound' }, 'res': { 'name': 'res', 'params': [ { 'name': 'res', 'description': 'Resonance/Width of filter freq\n from 0.001 to 1000
\n', 'type': 'Number' }, { 'name': 'timeFromNow', 'description': 'schedule this event to happen\n seconds from now
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Filter', 'module': 'p5.sound' }, 'gain': { 'name': 'gain', 'params': [ { 'name': 'gain', 'description': '', 'type': 'Number' } ], 'class': 'p5.Filter', 'module': 'p5.sound' }, 'toggle': { 'name': 'toggle', 'class': 'p5.Filter', 'module': 'p5.sound' }, 'setType': { 'name': 'setType', 'params': [ { 'name': 't', 'description': '', 'type': 'String' } ], 'class': 'p5.Filter', 'module': 'p5.sound' } }, 'p5.EQ': { 'bands': { 'name': 'bands', 'class': 'p5.EQ', 'module': 'p5.sound' }, 'process': { 'name': 'process', 'params': [ { 'name': 'src', 'description': 'Audio source
\n', 'type': 'Object' } ], 'class': 'p5.EQ', 'module': 'p5.sound' } }, 'p5.Panner3D': { 'panner': { 'name': 'panner', 'class': 'p5.Panner3D', 'module': 'p5.sound' }, 'process': { 'name': 'process', 'params': [ { 'name': 'src', 'description': 'Input source
\n', 'type': 'Object' } ], 'class': 'p5.Panner3D', 'module': 'p5.sound' }, 'set': { 'name': 'set', 'params': [ { 'name': 'xVal', 'description': '', 'type': 'Number' }, { 'name': 'yVal', 'description': '', 'type': 'Number' }, { 'name': 'zVal', 'description': '', 'type': 'Number' }, { 'name': 'time', 'description': '', 'type': 'Number' } ], 'class': 'p5.Panner3D', 'module': 'p5.sound' }, 'positionX': { 'name': 'positionX', 'class': 'p5.Panner3D', 'module': 'p5.sound' }, 'positionY': { 'name': 'positionY', 'class': 'p5.Panner3D', 'module': 'p5.sound' }, 'positionZ': { 'name': 'positionZ', 'class': 'p5.Panner3D', 'module': 'p5.sound' }, 'orient': { 'name': 'orient', 'params': [ { 'name': 'xVal', 'description': '', 'type': 'Number' }, { 'name': 'yVal', 'description': '', 'type': 'Number' }, { 'name': 'zVal', 'description': '', 'type': 'Number' }, { 'name': 'time', 'description': '', 'type': 'Number' } ], 'class': 'p5.Panner3D', 'module': 'p5.sound' }, 'orientX': { 'name': 'orientX', 'class': 'p5.Panner3D', 'module': 'p5.sound' }, 'orientY': { 'name': 'orientY', 'class': 'p5.Panner3D', 'module': 'p5.sound' }, 'orientZ': { 'name': 'orientZ', 'class': 'p5.Panner3D', 'module': 'p5.sound' }, 'setFalloff': { 'name': 'setFalloff', 'params': [ { 'name': 'maxDistance', 'description': '', 'type': 'Number', 'optional': true }, { 'name': 'rolloffFactor', 'description': '', 'type': 'Number', 'optional': true } ], 'class': 'p5.Panner3D', 'module': 'p5.sound' }, 'maxDist': { 'name': 'maxDist', 'params': [ { 'name': 'maxDistance', 'description': '', 'type': 'Number' } ], 'class': 'p5.Panner3D', 'module': 'p5.sound' }, 'rollof': { 'name': 'rollof', 'params': [ { 'name': 'rolloffFactor', 'description': '', 'type': 'Number' } ], 'class': 'p5.Panner3D', 'module': 'p5.sound' } }, 'p5.Delay': { 'leftDelay': { 'name': 'leftDelay', 'class': 'p5.Delay', 'module': 'p5.sound' }, 'rightDelay': { 'name': 'rightDelay', 'class': 'p5.Delay', 'module': 'p5.sound' }, 'process': { 'name': 'process', 'params': [ { 'name': 'Signal', 'description': 'An object that outputs audio
\n', 'type': 'Object' }, { 'name': 'delayTime', 'description': 'Time (in seconds) of the delay/echo.\n Some browsers limit delayTime to\n 1 second.
\n', 'type': 'Number', 'optional': true }, { 'name': 'feedback', 'description': 'sends the delay back through itself\n in a loop that decreases in volume\n each time.
\n', 'type': 'Number', 'optional': true }, { 'name': 'lowPass', 'description': 'Cutoff frequency. Only frequencies\n below the lowPass will be part of the\n delay.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Delay', 'module': 'p5.sound' }, 'delayTime': { 'name': 'delayTime', 'params': [ { 'name': 'delayTime', 'description': 'Time (in seconds) of the delay
\n', 'type': 'Number' } ], 'class': 'p5.Delay', 'module': 'p5.sound' }, 'feedback': { 'name': 'feedback', 'params': [ { 'name': 'feedback', 'description': '0.0 to 1.0, or an object such as an\n Oscillator that can be used to\n modulate this param
\n', 'type': 'Number|Object' } ], 'class': 'p5.Delay', 'module': 'p5.sound' }, 'filter': { 'name': 'filter', 'params': [ { 'name': 'cutoffFreq', 'description': 'A lowpass filter will cut off any\n frequencies higher than the filter frequency.
\n', 'type': 'Number|Object' }, { 'name': 'res', 'description': 'Resonance of the filter frequency\n cutoff, or an object (i.e. a p5.Oscillator)\n that can be used to modulate this parameter.\n High numbers (i.e. 15) will produce a resonance,\n low numbers (i.e. .2) will produce a slope.
\n', 'type': 'Number|Object' } ], 'class': 'p5.Delay', 'module': 'p5.sound' }, 'setType': { 'name': 'setType', 'params': [ { 'name': 'type', 'description': '\'pingPong\' (1) or \'default\' (0)
\n', 'type': 'String|Number' } ], 'class': 'p5.Delay', 'module': 'p5.sound' }, 'amp': { 'name': 'amp', 'params': [ { 'name': 'volume', 'description': 'amplitude between 0 and 1.0
\n', 'type': 'Number' }, { 'name': 'rampTime', 'description': 'create a fade that lasts rampTime
\n', 'type': 'Number', 'optional': true }, { 'name': 'timeFromNow', 'description': 'schedule this event to happen\n seconds from now
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Delay', 'module': 'p5.sound' }, 'connect': { 'name': 'connect', 'params': [ { 'name': 'unit', 'description': '', 'type': 'Object' } ], 'class': 'p5.Delay', 'module': 'p5.sound' }, 'disconnect': { 'name': 'disconnect', 'class': 'p5.Delay', 'module': 'p5.sound' } }, 'p5.Reverb': { 'process': { 'name': 'process', 'params': [ { 'name': 'src', 'description': 'p5.sound / Web Audio object with a sound\n output.
\n', 'type': 'Object' }, { 'name': 'seconds', 'description': 'Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.
\n', 'type': 'Number', 'optional': true }, { 'name': 'decayRate', 'description': 'Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.
\n', 'type': 'Number', 'optional': true }, { 'name': 'reverse', 'description': 'Play the reverb backwards or forwards.
\n', 'type': 'Boolean', 'optional': true } ], 'class': 'p5.Reverb', 'module': 'p5.sound' }, 'set': { 'name': 'set', 'params': [ { 'name': 'seconds', 'description': 'Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.
\n', 'type': 'Number', 'optional': true }, { 'name': 'decayRate', 'description': 'Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.
\n', 'type': 'Number', 'optional': true }, { 'name': 'reverse', 'description': 'Play the reverb backwards or forwards.
\n', 'type': 'Boolean', 'optional': true } ], 'class': 'p5.Reverb', 'module': 'p5.sound' }, 'amp': { 'name': 'amp', 'params': [ { 'name': 'volume', 'description': 'amplitude between 0 and 1.0
\n', 'type': 'Number' }, { 'name': 'rampTime', 'description': 'create a fade that lasts rampTime
\n', 'type': 'Number', 'optional': true }, { 'name': 'timeFromNow', 'description': 'schedule this event to happen\n seconds from now
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Reverb', 'module': 'p5.sound' }, 'connect': { 'name': 'connect', 'params': [ { 'name': 'unit', 'description': '', 'type': 'Object' } ], 'class': 'p5.Reverb', 'module': 'p5.sound' }, 'disconnect': { 'name': 'disconnect', 'class': 'p5.Reverb', 'module': 'p5.sound' } }, 'p5.Convolver': { 'convolverNode': { 'name': 'convolverNode', 'class': 'p5.Convolver', 'module': 'p5.sound' }, 'impulses': { 'name': 'impulses', 'class': 'p5.Convolver', 'module': 'p5.sound' }, 'process': { 'name': 'process', 'params': [ { 'name': 'src', 'description': 'p5.sound / Web Audio object with a sound\n output.
\n', 'type': 'Object' } ], 'class': 'p5.Convolver', 'module': 'p5.sound' }, 'addImpulse': { 'name': 'addImpulse', 'params': [ { 'name': 'path', 'description': 'path to a sound file
\n', 'type': 'String' }, { 'name': 'callback', 'description': 'function (optional)
\n', 'type': 'Function' }, { 'name': 'errorCallback', 'description': 'function (optional)
\n', 'type': 'Function' } ], 'class': 'p5.Convolver', 'module': 'p5.sound' }, 'resetImpulse': { 'name': 'resetImpulse', 'params': [ { 'name': 'path', 'description': 'path to a sound file
\n', 'type': 'String' }, { 'name': 'callback', 'description': 'function (optional)
\n', 'type': 'Function' }, { 'name': 'errorCallback', 'description': 'function (optional)
\n', 'type': 'Function' } ], 'class': 'p5.Convolver', 'module': 'p5.sound' }, 'toggleImpulse': { 'name': 'toggleImpulse', 'params': [ { 'name': 'id', 'description': 'Identify the impulse by its original filename\n (String), or by its position in the\n .impulses Array (Number).
Beats Per Minute
\n', 'type': 'Number' }, { 'name': 'rampTime', 'description': 'Seconds from now
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Part', 'module': 'p5.sound' }, 'getBPM': { 'name': 'getBPM', 'class': 'p5.Part', 'module': 'p5.sound' }, 'start': { 'name': 'start', 'params': [ { 'name': 'time', 'description': 'seconds from now
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Part', 'module': 'p5.sound' }, 'loop': { 'name': 'loop', 'params': [ { 'name': 'time', 'description': 'seconds from now
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Part', 'module': 'p5.sound' }, 'noLoop': { 'name': 'noLoop', 'class': 'p5.Part', 'module': 'p5.sound' }, 'stop': { 'name': 'stop', 'params': [ { 'name': 'time', 'description': 'seconds from now
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Part', 'module': 'p5.sound' }, 'pause': { 'name': 'pause', 'params': [ { 'name': 'time', 'description': 'seconds from now
\n', 'type': 'Number' } ], 'class': 'p5.Part', 'module': 'p5.sound' }, 'addPhrase': { 'name': 'addPhrase', 'params': [ { 'name': 'phrase', 'description': 'reference to a p5.Phrase
\n', 'type': 'p5.Phrase' } ], 'class': 'p5.Part', 'module': 'p5.sound' }, 'removePhrase': { 'name': 'removePhrase', 'params': [ { 'name': 'phraseName', 'description': '', 'type': 'String' } ], 'class': 'p5.Part', 'module': 'p5.sound' }, 'getPhrase': { 'name': 'getPhrase', 'params': [ { 'name': 'phraseName', 'description': '', 'type': 'String' } ], 'class': 'p5.Part', 'module': 'p5.sound' }, 'replaceSequence': { 'name': 'replaceSequence', 'params': [ { 'name': 'phraseName', 'description': '', 'type': 'String' }, { 'name': 'sequence', 'description': 'Array of values to pass into the callback\n at each step of the phrase.
\n', 'type': 'Array' } ], 'class': 'p5.Part', 'module': 'p5.sound' }, 'onStep': { 'name': 'onStep', 'params': [ { 'name': 'callback', 'description': 'The name of the callback\n you want to fire\n on every beat/tatum.
\n', 'type': 'Function' } ], 'class': 'p5.Part', 'module': 'p5.sound' } }, 'p5.Score': { 'start': { 'name': 'start', 'class': 'p5.Score', 'module': 'p5.sound' }, 'stop': { 'name': 'stop', 'class': 'p5.Score', 'module': 'p5.sound' }, 'pause': { 'name': 'pause', 'class': 'p5.Score', 'module': 'p5.sound' }, 'loop': { 'name': 'loop', 'class': 'p5.Score', 'module': 'p5.sound' }, 'noLoop': { 'name': 'noLoop', 'class': 'p5.Score', 'module': 'p5.sound' }, 'setBPM': { 'name': 'setBPM', 'params': [ { 'name': 'BPM', 'description': 'Beats Per Minute
\n', 'type': 'Number' }, { 'name': 'rampTime', 'description': 'Seconds from now
\n', 'type': 'Number' } ], 'class': 'p5.Score', 'module': 'p5.sound' } }, 'p5.SoundLoop': { 'bpm': { 'name': 'bpm', 'class': 'p5.SoundLoop', 'module': 'p5.sound' }, 'timeSignature': { 'name': 'timeSignature', 'class': 'p5.SoundLoop', 'module': 'p5.sound' }, 'interval': { 'name': 'interval', 'class': 'p5.SoundLoop', 'module': 'p5.sound' }, 'iterations': { 'name': 'iterations', 'class': 'p5.SoundLoop', 'module': 'p5.sound' }, 'musicalTimeMode': { 'name': 'musicalTimeMode', 'class': 'p5.SoundLoop', 'module': 'p5.sound' }, 'maxIterations': { 'name': 'maxIterations', 'class': 'p5.SoundLoop', 'module': 'p5.sound' }, 'start': { 'name': 'start', 'params': [ { 'name': 'timeFromNow', 'description': 'schedule a starting time
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.SoundLoop', 'module': 'p5.sound' }, 'stop': { 'name': 'stop', 'params': [ { 'name': 'timeFromNow', 'description': 'schedule a stopping time
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.SoundLoop', 'module': 'p5.sound' }, 'pause': { 'name': 'pause', 'params': [ { 'name': 'timeFromNow', 'description': 'schedule a pausing time
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.SoundLoop', 'module': 'p5.sound' }, 'syncedStart': { 'name': 'syncedStart', 'params': [ { 'name': 'otherLoop', 'description': 'a p5.SoundLoop to sync with
\n', 'type': 'Object' }, { 'name': 'timeFromNow', 'description': 'Start the loops in sync after timeFromNow seconds
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.SoundLoop', 'module': 'p5.sound' } }, 'p5.Compressor': { 'compressor': { 'name': 'compressor', 'class': 'p5.Compressor', 'module': 'p5.sound' }, 'process': { 'name': 'process', 'params': [ { 'name': 'src', 'description': 'Sound source to be connected
\n', 'type': 'Object' }, { 'name': 'attack', 'description': 'The amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1
\n', 'type': 'Number', 'optional': true }, { 'name': 'knee', 'description': 'A decibel value representing the range above the\n threshold where the curve smoothly transitions to the "ratio" portion.\n default = 30, range 0 - 40
\n', 'type': 'Number', 'optional': true }, { 'name': 'ratio', 'description': 'The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20
\n', 'type': 'Number', 'optional': true }, { 'name': 'threshold', 'description': 'The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0
\n', 'type': 'Number', 'optional': true }, { 'name': 'release', 'description': 'The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Compressor', 'module': 'p5.sound' }, 'set': { 'name': 'set', 'params': [ { 'name': 'attack', 'description': 'The amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1
\n', 'type': 'Number' }, { 'name': 'knee', 'description': 'A decibel value representing the range above the\n threshold where the curve smoothly transitions to the "ratio" portion.\n default = 30, range 0 - 40
\n', 'type': 'Number' }, { 'name': 'ratio', 'description': 'The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20
\n', 'type': 'Number' }, { 'name': 'threshold', 'description': 'The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0
\n', 'type': 'Number' }, { 'name': 'release', 'description': 'The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1
\n', 'type': 'Number' } ], 'class': 'p5.Compressor', 'module': 'p5.sound' }, 'attack': { 'name': 'attack', 'params': [ { 'name': 'attack', 'description': 'Attack is the amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1
\n', 'type': 'Number', 'optional': true }, { 'name': 'time', 'description': 'Assign time value to schedule the change in value
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Compressor', 'module': 'p5.sound' }, 'knee': { 'name': 'knee', 'params': [ { 'name': 'knee', 'description': 'A decibel value representing the range above the\n threshold where the curve smoothly transitions to the "ratio" portion.\n default = 30, range 0 - 40
\n', 'type': 'Number', 'optional': true }, { 'name': 'time', 'description': 'Assign time value to schedule the change in value
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Compressor', 'module': 'p5.sound' }, 'ratio': { 'name': 'ratio', 'params': [ { 'name': 'ratio', 'description': 'The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20
\n', 'type': 'Number', 'optional': true }, { 'name': 'time', 'description': 'Assign time value to schedule the change in value
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Compressor', 'module': 'p5.sound' }, 'threshold': { 'name': 'threshold', 'params': [ { 'name': 'threshold', 'description': 'The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0
\n', 'type': 'Number' }, { 'name': 'time', 'description': 'Assign time value to schedule the change in value
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Compressor', 'module': 'p5.sound' }, 'release': { 'name': 'release', 'params': [ { 'name': 'release', 'description': 'The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1
\n', 'type': 'Number' }, { 'name': 'time', 'description': 'Assign time value to schedule the change in value
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Compressor', 'module': 'p5.sound' }, 'reduction': { 'name': 'reduction', 'class': 'p5.Compressor', 'module': 'p5.sound' } }, 'p5.PeakDetect': { 'isDetected': { 'name': 'isDetected', 'class': 'p5.PeakDetect', 'module': 'p5.sound' }, 'update': { 'name': 'update', 'params': [ { 'name': 'fftObject', 'description': 'A p5.FFT object
\n', 'type': 'p5.FFT' } ], 'class': 'p5.PeakDetect', 'module': 'p5.sound' }, 'onPeak': { 'name': 'onPeak', 'params': [ { 'name': 'callback', 'description': 'Name of a function that will\n be called when a peak is\n detected.
\n', 'type': 'Function' }, { 'name': 'val', 'description': 'Optional value to pass\n into the function when\n a peak is detected.
\n', 'type': 'Object', 'optional': true } ], 'class': 'p5.PeakDetect', 'module': 'p5.sound' } }, 'p5.SoundRecorder': { 'setInput': { 'name': 'setInput', 'params': [ { 'name': 'unit', 'description': 'p5.sound object or a web audio unit\n that outputs sound
\n', 'type': 'Object', 'optional': true } ], 'class': 'p5.SoundRecorder', 'module': 'p5.sound' }, 'record': { 'name': 'record', 'params': [ { 'name': 'soundFile', 'description': 'p5.SoundFile
\n', 'type': 'p5.SoundFile' }, { 'name': 'duration', 'description': 'Time (in seconds)
\n', 'type': 'Number', 'optional': true }, { 'name': 'callback', 'description': 'The name of a function that will be\n called once the recording completes
\n', 'type': 'Function', 'optional': true } ], 'class': 'p5.SoundRecorder', 'module': 'p5.sound' }, 'stop': { 'name': 'stop', 'class': 'p5.SoundRecorder', 'module': 'p5.sound' } }, 'p5.Distortion': { 'WaveShaperNode': { 'name': 'WaveShaperNode', 'class': 'p5.Distortion', 'module': 'p5.sound' }, 'process': { 'name': 'process', 'params': [ { 'name': 'amount', 'description': 'Unbounded distortion amount.\n Normal values range from 0-1.
\n', 'type': 'Number', 'optional': true, 'optdefault': '0.25' }, { 'name': 'oversample', 'description': '\'none\', \'2x\', or \'4x\'.
\n', 'type': 'String', 'optional': true, 'optdefault': '\'none\'' } ], 'class': 'p5.Distortion', 'module': 'p5.sound' }, 'set': { 'name': 'set', 'params': [ { 'name': 'amount', 'description': 'Unbounded distortion amount.\n Normal values range from 0-1.
\n', 'type': 'Number', 'optional': true, 'optdefault': '0.25' }, { 'name': 'oversample', 'description': '\'none\', \'2x\', or \'4x\'.
\n', 'type': 'String', 'optional': true, 'optdefault': '\'none\'' } ], 'class': 'p5.Distortion', 'module': 'p5.sound' }, 'getAmount': { 'name': 'getAmount', 'class': 'p5.Distortion', 'module': 'p5.sound' }, 'getOversample': { 'name': 'getOversample', 'class': 'p5.Distortion', 'module': 'p5.sound' } }, 'p5.Gain': { 'setInput': { 'name': 'setInput', 'params': [ { 'name': 'src', 'description': 'p5.sound / Web Audio object with a sound\n output.
\n', 'type': 'Object' } ], 'class': 'p5.Gain', 'module': 'p5.sound' }, 'connect': { 'name': 'connect', 'params': [ { 'name': 'unit', 'description': '', 'type': 'Object' } ], 'class': 'p5.Gain', 'module': 'p5.sound' }, 'disconnect': { 'name': 'disconnect', 'class': 'p5.Gain', 'module': 'p5.sound' }, 'amp': { 'name': 'amp', 'params': [ { 'name': 'volume', 'description': 'amplitude between 0 and 1.0
\n', 'type': 'Number' }, { 'name': 'rampTime', 'description': 'create a fade that lasts rampTime
\n', 'type': 'Number', 'optional': true }, { 'name': 'timeFromNow', 'description': 'schedule this event to happen\n seconds from now
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.Gain', 'module': 'p5.sound' } }, 'p5.AudioVoice': { 'connect': { 'name': 'connect', 'params': [ { 'name': 'unit', 'description': '', 'type': 'Object' } ], 'class': 'p5.AudioVoice', 'module': 'p5.sound' }, 'disconnect': { 'name': 'disconnect', 'class': 'p5.AudioVoice', 'module': 'p5.sound' } }, 'p5.MonoSynth': { 'attack': { 'name': 'attack', 'class': 'p5.MonoSynth', 'module': 'p5.sound' }, 'decay': { 'name': 'decay', 'class': 'p5.MonoSynth', 'module': 'p5.sound' }, 'sustain': { 'name': 'sustain', 'class': 'p5.MonoSynth', 'module': 'p5.sound' }, 'release': { 'name': 'release', 'class': 'p5.MonoSynth', 'module': 'p5.sound' }, 'play': { 'name': 'play', 'params': [ { 'name': 'note', 'description': 'the note you want to play, specified as a\n frequency in Hertz (Number) or as a midi\n value in Note/Octave format ("C4", "Eb3"...etc")\n See \n Tone. Defaults to 440 hz.
\n', 'type': 'String | Number' }, { 'name': 'velocity', 'description': 'velocity of the note to play (ranging from 0 to 1)
\n', 'type': 'Number', 'optional': true }, { 'name': 'secondsFromNow', 'description': 'time from now (in seconds) at which to play
\n', 'type': 'Number', 'optional': true }, { 'name': 'sustainTime', 'description': 'time to sustain before releasing the envelope. Defaults to 0.15 seconds.
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.MonoSynth', 'module': 'p5.sound' }, 'triggerAttack': { 'params': [ { 'name': 'note', 'description': 'the note you want to play, specified as a\n frequency in Hertz (Number) or as a midi\n value in Note/Octave format ("C4", "Eb3"...etc")\n See \n Tone. Defaults to 440 hz
\n', 'type': 'String | Number' }, { 'name': 'velocity', 'description': 'velocity of the note to play (ranging from 0 to 1)
\n', 'type': 'Number', 'optional': true }, { 'name': 'secondsFromNow', 'description': 'time from now (in seconds) at which to play
\n', 'type': 'Number', 'optional': true } ], 'name': 'triggerAttack', 'class': 'p5.MonoSynth', 'module': 'p5.sound' }, 'triggerRelease': { 'params': [ { 'name': 'secondsFromNow', 'description': 'time to trigger the release
\n', 'type': 'Number' } ], 'name': 'triggerRelease', 'class': 'p5.MonoSynth', 'module': 'p5.sound' }, 'setADSR': { 'name': 'setADSR', 'params': [ { 'name': 'attackTime', 'description': 'Time (in seconds before envelope\n reaches Attack Level
\n', 'type': 'Number' }, { 'name': 'decayTime', 'description': 'Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n', 'type': 'Number', 'optional': true }, { 'name': 'susRatio', 'description': 'Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
Time in seconds from now (defaults to 0)
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.MonoSynth', 'module': 'p5.sound' }, 'amp': { 'name': 'amp', 'params': [ { 'name': 'vol', 'description': 'desired volume
\n', 'type': 'Number' }, { 'name': 'rampTime', 'description': 'Time to reach new volume
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.MonoSynth', 'module': 'p5.sound' }, 'connect': { 'name': 'connect', 'params': [ { 'name': 'unit', 'description': 'A p5.sound or Web Audio object
\n', 'type': 'Object' } ], 'class': 'p5.MonoSynth', 'module': 'p5.sound' }, 'disconnect': { 'name': 'disconnect', 'class': 'p5.MonoSynth', 'module': 'p5.sound' }, 'dispose': { 'name': 'dispose', 'class': 'p5.MonoSynth', 'module': 'p5.sound' } }, 'p5.PolySynth': { 'notes': { 'name': 'notes', 'class': 'p5.PolySynth', 'module': 'p5.sound' }, 'polyvalue': { 'name': 'polyvalue', 'class': 'p5.PolySynth', 'module': 'p5.sound' }, 'AudioVoice': { 'name': 'AudioVoice', 'class': 'p5.PolySynth', 'module': 'p5.sound' }, 'play': { 'name': 'play', 'params': [ { 'name': 'note', 'description': 'midi note to play (ranging from 0 to 127 - 60 being a middle C)
\n', 'type': 'Number', 'optional': true }, { 'name': 'velocity', 'description': 'velocity of the note to play (ranging from 0 to 1)
\n', 'type': 'Number', 'optional': true }, { 'name': 'secondsFromNow', 'description': 'time from now (in seconds) at which to play
\n', 'type': 'Number', 'optional': true }, { 'name': 'sustainTime', 'description': 'time to sustain before releasing the envelope
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.PolySynth', 'module': 'p5.sound' }, 'noteADSR': { 'name': 'noteADSR', 'params': [ { 'name': 'note', 'description': 'Midi note on which ADSR should be set.
\n', 'type': 'Number', 'optional': true }, { 'name': 'attackTime', 'description': 'Time (in seconds before envelope\n reaches Attack Level
\n', 'type': 'Number', 'optional': true }, { 'name': 'decayTime', 'description': 'Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n', 'type': 'Number', 'optional': true }, { 'name': 'susRatio', 'description': 'Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
Time in seconds from now (defaults to 0)
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.PolySynth', 'module': 'p5.sound' }, 'setADSR': { 'name': 'setADSR', 'params': [ { 'name': 'attackTime', 'description': 'Time (in seconds before envelope\n reaches Attack Level
\n', 'type': 'Number', 'optional': true }, { 'name': 'decayTime', 'description': 'Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n', 'type': 'Number', 'optional': true }, { 'name': 'susRatio', 'description': 'Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
Time in seconds from now (defaults to 0)
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.PolySynth', 'module': 'p5.sound' }, 'noteAttack': { 'name': 'noteAttack', 'params': [ { 'name': 'note', 'description': 'midi note on which attack should be triggered.
\n', 'type': 'Number', 'optional': true }, { 'name': 'velocity', 'description': 'velocity of the note to play (ranging from 0 to 1)/
\n', 'type': 'Number', 'optional': true }, { 'name': 'secondsFromNow', 'description': 'time from now (in seconds)
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.PolySynth', 'module': 'p5.sound' }, 'noteRelease': { 'name': 'noteRelease', 'params': [ { 'name': 'note', 'description': 'midi note on which attack should be triggered.\n If no value is provided, all notes will be released.
\n', 'type': 'Number', 'optional': true }, { 'name': 'secondsFromNow', 'description': 'time to trigger the release
\n', 'type': 'Number', 'optional': true } ], 'class': 'p5.PolySynth', 'module': 'p5.sound' }, 'connect': { 'name': 'connect', 'params': [ { 'name': 'unit', 'description': 'A p5.sound or Web Audio object
\n', 'type': 'Object' } ], 'class': 'p5.PolySynth', 'module': 'p5.sound' }, 'disconnect': { 'name': 'disconnect', 'class': 'p5.PolySynth', 'module': 'p5.sound' }, 'dispose': { 'name': 'dispose', 'class': 'p5.PolySynth', 'module': 'p5.sound' } } } }, { } ], 2: [ function (_dereq_, module, exports) { function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } module.exports = _arrayWithHoles; }, { } ], 3: [ function (_dereq_, module, exports) { function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } module.exports = _arrayWithoutHoles; }, { } ], 4: [ function (_dereq_, module, exports) { function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called'); } return self; } module.exports = _assertThisInitialized; }, { } ], 5: [ function (_dereq_, module, exports) { function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } module.exports = _classCallCheck; }, { } ], 6: [ function (_dereq_, module, exports) { function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } module.exports = _createClass; }, { } ], 7: [ function (_dereq_, module, exports) { function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } module.exports = _defineProperty; }, { } ], 8: [ function (_dereq_, module, exports) { function _getPrototypeOf(o) { module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } module.exports = _getPrototypeOf; }, { } ], 9: [ function (_dereq_, module, exports) { var setPrototypeOf = _dereq_('./setPrototypeOf'); function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function'); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) setPrototypeOf(subClass, superClass); } module.exports = _inherits; }, { './setPrototypeOf': 16 } ], 10: [ function (_dereq_, module, exports) { function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === '[object Arguments]') return Array.from(iter); } module.exports = _iterableToArray; }, { } ], 11: [ function (_dereq_, module, exports) { function _iterableToArrayLimit(arr, i) { var _arr = [ ]; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return'] != null) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } module.exports = _iterableToArrayLimit; }, { } ], 12: [ function (_dereq_, module, exports) { function _nonIterableRest() { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } module.exports = _nonIterableRest; }, { } ], 13: [ function (_dereq_, module, exports) { function _nonIterableSpread() { throw new TypeError('Invalid attempt to spread non-iterable instance'); } module.exports = _nonIterableSpread; }, { } ], 14: [ function (_dereq_, module, exports) { var defineProperty = _dereq_('./defineProperty'); function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : { }; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { defineProperty(target, key, source[key]); }); } return target; } module.exports = _objectSpread; }, { './defineProperty': 7 } ], 15: [ function (_dereq_, module, exports) { var _typeof = _dereq_('../helpers/typeof'); var assertThisInitialized = _dereq_('./assertThisInitialized'); function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === 'object' || typeof call === 'function')) { return call; } return assertThisInitialized(self); } module.exports = _possibleConstructorReturn; }, { '../helpers/typeof': 19, './assertThisInitialized': 4 } ], 16: [ function (_dereq_, module, exports) { function _setPrototypeOf(o, p) { module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } module.exports = _setPrototypeOf; }, { } ], 17: [ function (_dereq_, module, exports) { var arrayWithHoles = _dereq_('./arrayWithHoles'); var iterableToArrayLimit = _dereq_('./iterableToArrayLimit'); var nonIterableRest = _dereq_('./nonIterableRest'); function _slicedToArray(arr, i) { return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || nonIterableRest(); } module.exports = _slicedToArray; }, { './arrayWithHoles': 2, './iterableToArrayLimit': 11, './nonIterableRest': 12 } ], 18: [ function (_dereq_, module, exports) { var arrayWithoutHoles = _dereq_('./arrayWithoutHoles'); var iterableToArray = _dereq_('./iterableToArray'); var nonIterableSpread = _dereq_('./nonIterableSpread'); function _toConsumableArray(arr) { return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread(); } module.exports = _toConsumableArray; }, { './arrayWithoutHoles': 3, './iterableToArray': 10, './nonIterableSpread': 13 } ], 19: [ function (_dereq_, module, exports) { function _typeof2(obj) { if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj; }; } return _typeof2(obj); } function _typeof(obj) { if (typeof Symbol === 'function' && _typeof2(Symbol.iterator) === 'symbol') { module.exports = _typeof = function _typeof(obj) { return _typeof2(obj); }; } else { module.exports = _typeof = function _typeof(obj) { return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : _typeof2(obj); }; } return _typeof(obj); } module.exports = _typeof; }, { } ], 20: [ function (_dereq_, module, exports) { 'use strict'; exports.byteLength = byteLength; exports.toByteArray = toByteArray; exports.fromByteArray = fromByteArray; var lookup = [ ]; var revLookup = [ ]; var Arr = typeof Uint8Array !== 'undefined' ? Uint8Array : Array; var code = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; for (var i = 0, len = code.length; i < len; ++i) { lookup[i] = code[i]; revLookup[code.charCodeAt(i)] = i; } // Support decoding URL-safe base64 strings, as Node.js does. // See: https://en.wikipedia.org/wiki/Base64#URL_applications revLookup['-'.charCodeAt(0)] = 62; revLookup['_'.charCodeAt(0)] = 63; function getLens(b64) { var len = b64.length; if (len % 4 > 0) { throw new Error('Invalid string. Length must be a multiple of 4'); } // Trim off extra bytes after placeholder bytes are found // See: https://github.com/beatgammit/base64-js/issues/42 var validLen = b64.indexOf('='); if (validLen === - 1) validLen = len; var placeHoldersLen = validLen === len ? 0 : 4 - validLen % 4; return [validLen, placeHoldersLen]; } // base64 is 4/3 + up to two characters of the original data function byteLength(b64) { var lens = getLens(b64); var validLen = lens[0]; var placeHoldersLen = lens[1]; return (validLen + placeHoldersLen) * 3 / 4 - placeHoldersLen; } function _byteLength(b64, validLen, placeHoldersLen) { return (validLen + placeHoldersLen) * 3 / 4 - placeHoldersLen; } function toByteArray(b64) { var tmp; var lens = getLens(b64); var validLen = lens[0]; var placeHoldersLen = lens[1]; var arr = new Arr(_byteLength(b64, validLen, placeHoldersLen)); var curByte = 0; // if there are placeholders, only get up to the last complete 4 chars var len = placeHoldersLen > 0 ? validLen - 4 : validLen; var i; for (i = 0; i < len; i += 4) { tmp = revLookup[b64.charCodeAt(i)] << 18 | revLookup[b64.charCodeAt(i + 1)] << 12 | revLookup[b64.charCodeAt(i + 2)] << 6 | revLookup[b64.charCodeAt(i + 3)]; arr[curByte++] = tmp >> 16 & 255; arr[curByte++] = tmp >> 8 & 255; arr[curByte++] = tmp & 255; } if (placeHoldersLen === 2) { tmp = revLookup[b64.charCodeAt(i)] << 2 | revLookup[b64.charCodeAt(i + 1)] >> 4; arr[curByte++] = tmp & 255; } if (placeHoldersLen === 1) { tmp = revLookup[b64.charCodeAt(i)] << 10 | revLookup[b64.charCodeAt(i + 1)] << 4 | revLookup[b64.charCodeAt(i + 2)] >> 2; arr[curByte++] = tmp >> 8 & 255; arr[curByte++] = tmp & 255; } return arr; } function tripletToBase64(num) { return lookup[num >> 18 & 63] + lookup[num >> 12 & 63] + lookup[num >> 6 & 63] + lookup[num & 63]; } function encodeChunk(uint8, start, end) { var tmp; var output = [ ]; for (var i = start; i < end; i += 3) { tmp = (uint8[i] << 16 & 16711680) + (uint8[i + 1] << 8 & 65280) + (uint8[i + 2] & 255); output.push(tripletToBase64(tmp)); } return output.join(''); } function fromByteArray(uint8) { var tmp; var len = uint8.length; var extraBytes = len % 3; // if we have 1 byte left, pad 2 bytes var parts = [ ]; var maxChunkLength = 16383; // must be multiple of 3 // go through the array every three bytes, we'll deal with trailing stuff later for (var i = 0, len2 = len - extraBytes; i < len2; i += maxChunkLength) { parts.push(encodeChunk(uint8, i, i + maxChunkLength > len2 ? len2 : i + maxChunkLength)); } // pad the end with zeros, but make sure to not forget the extra bytes if (extraBytes === 1) { tmp = uint8[len - 1]; parts.push(lookup[tmp >> 2] + lookup[tmp << 4 & 63] + '=='); } else if (extraBytes === 2) { tmp = (uint8[len - 2] << 8) + uint8[len - 1]; parts.push(lookup[tmp >> 10] + lookup[tmp >> 4 & 63] + lookup[tmp << 2 & 63] + '='); } return parts.join(''); } }, { } ], 21: [ function (_dereq_, module, exports) { }, { } ], 22: [ function (_dereq_, module, exports) { (function (Buffer) { /*! * The buffer module from node.js, for the browser. * * @author Feross Aboukhadijeh
* function setup() {
* background('pink');
*
* // Draw a heart.
* fill('red');
* noStroke();
* circle(67, 67, 20);
* circle(83, 67, 20);
* triangle(91, 73, 75, 95, 59, 73);
*
* // Add a general description of the canvas.
* describe('A pink square with a red heart in the bottom-right corner.');
* }
*
*
* function setup() {
* background('pink');
*
* // Draw a heart.
* fill('red');
* noStroke();
* circle(67, 67, 20);
* circle(83, 67, 20);
* triangle(91, 73, 75, 95, 59, 73);
*
* // Add a general description of the canvas
* // and display it for debugging.
* describe('A pink square with a red heart in the bottom-right corner.', LABEL);
* }
*
*
* function draw() {
* background(200);
*
* // The expression
* // frameCount % 100
* // causes x to increase from 0
* // to 99, then restart from 0.
* let x = frameCount % 100;
*
* // Draw the circle.
* fill(0, 255, 0);
* circle(x, 50, 40);
*
* // Add a general description of the canvas.
* describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`);
* }
*
*
* function draw() {
* background(200);
*
* // The expression
* // frameCount % 100
* // causes x to increase from 0
* // to 99, then restart from 0.
* let x = frameCount % 100;
*
* // Draw the circle.
* fill(0, 255, 0);
* circle(x, 50, 40);
*
* // Add a general description of the canvas
* // and display it for debugging.
* describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`, LABEL);
* }
*
*
* function setup() {
* background('pink');
*
* // Describe the first element
* // and draw it.
* describeElement('Circle', 'A yellow circle in the top-left corner.');
* noStroke();
* fill('yellow');
* circle(25, 25, 40);
*
* // Describe the second element
* // and draw it.
* describeElement('Heart', 'A red heart in the bottom-right corner.');
* fill('red');
* circle(66.6, 66.6, 20);
* circle(83.2, 66.6, 20);
* triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
*
* // Add a general description of the canvas.
* describe('A red heart and yellow circle over a pink background.');
* }
*
*
* function setup() {
* background('pink');
*
* // Describe the first element
* // and draw it. Display the
* // description for debugging.
* describeElement('Circle', 'A yellow circle in the top-left corner.', LABEL);
* noStroke();
* fill('yellow');
* circle(25, 25, 40);
*
* // Describe the second element
* // and draw it. Display the
* // description for debugging.
* describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL);
* fill('red');
* circle(66.6, 66.6, 20);
* circle(83.2, 66.6, 20);
* triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
*
* // Add a general description of the canvas.
* describe('A red heart and yellow circle over a pink background.');
* }
*
* for fallback description this.dummyDOM.querySelector('#'.concat(cnvId)).innerHTML = html; } else { //create description container +
for fallback description before outputs this.dummyDOM.querySelector('#'.concat(cnvId, 'accessibleOutput')).insertAdjacentHTML('beforebegin', html); } } else { //if describeElement() has already created the container and added a table of elements //create fallback description
before the table this.dummyDOM.querySelector('#' + cnvId + fallbackTableId).insertAdjacentHTML('beforebegin', '
')); } //if the container for the description exists this.descriptions.fallback = this.dummyDOM.querySelector('#'.concat(cnvId).concat(fallbackDescId)); this.descriptions.fallback.innerHTML = text; return; } else if (type === 'label') { //if there is no label container if (!this.dummyDOM.querySelector('#'.concat(cnvId + labelContainer))) { var _html = 'for label description this.dummyDOM.querySelector('#' + cnvId).insertAdjacentHTML('afterend', _html); } else { //create label container +
for label description before outputs this.dummyDOM.querySelector('#'.concat(cnvId, 'accessibleOutputLabel')).insertAdjacentHTML('beforebegin', _html); } } else if (this.dummyDOM.querySelector('#'.concat(cnvId + labelTableId))) { //if describeElement() has already created the container and added a table of elements //create label description
before the table this.dummyDOM.querySelector('#'.concat(cnvId + labelTableId)).insertAdjacentHTML('beforebegin', '
')); } this.descriptions.label = this.dummyDOM.querySelector('#' + cnvId + labelDescId); this.descriptions.label.innerHTML = text; return; } }; /* * Helper functions for describeElement(). */ //check that name is not LABEL or FALLBACK and ensure text ends with colon function _elementName(name) { if (name === 'label' || name === 'fallback') { throw new Error('element name should not be LABEL or FALLBACK'); } //check if last character of string n is '.', ';', or ',' if (name.endsWith('.') || name.endsWith(';') || name.endsWith(',')) { //replace last character with ':' name = name.replace(/.$/, ':'); } else if (!name.endsWith(':')) { //if string n does not end with ':' //add ':'' at the end of string name = name + ':'; } return name; } //creates HTML structure for element descriptions _main.default.prototype._describeElementHTML = function (type, name, text) { var cnvId = this.canvas.id; if (type === 'fallback') { //if there is no description container if (!this.dummyDOM.querySelector('#'.concat(cnvId + descContainer))) { //if there are no accessible outputs (see textOutput() and gridOutput()) var html = '
* function setup() {
* // Add the text description.
* textOutput();
*
* // Draw a couple of shapes.
* background(200);
* fill(255, 0, 0);
* circle(20, 20, 20);
* fill(0, 0, 255);
* square(50, 50, 50);
*
* // Add a general description of the canvas.
* describe('A red circle and a blue square on a gray background.');
* }
*
*
* function setup() {
* // Add the text description and
* // display it for debugging.
* textOutput(LABEL);
*
* // Draw a couple of shapes.
* background(200);
* fill(255, 0, 0);
* circle(20, 20, 20);
* fill(0, 0, 255);
* square(50, 50, 50);
*
* // Add a general description of the canvas.
* describe('A red circle and a blue square on a gray background.');
* }
*
*
* function draw() {
* // Add the text description.
* textOutput();
*
* // Draw a moving circle.
* background(200);
* let x = frameCount * 0.1;
* fill(255, 0, 0);
* circle(x, 20, 20);
* fill(0, 0, 255);
* square(50, 50, 50);
*
* // Add a general description of the canvas.
* describe('A red circle moves from left to right above a blue square.');
* }
*
*
* function draw() {
* // Add the text description and
* // display it for debugging.
* textOutput(LABEL);
*
* // Draw a moving circle.
* background(200);
* let x = frameCount * 0.1;
* fill(255, 0, 0);
* circle(x, 20, 20);
* fill(0, 0, 255);
* square(50, 50, 50);
*
* // Add a general description of the canvas.
* describe('A red circle moves from left to right above a blue square.');
* }
*
*
* function setup() {
* // Add the grid description.
* gridOutput();
*
* // Draw a couple of shapes.
* background(200);
* fill(255, 0, 0);
* circle(20, 20, 20);
* fill(0, 0, 255);
* square(50, 50, 50);
*
* // Add a general description of the canvas.
* describe('A red circle and a blue square on a gray background.');
* }
*
*
* function setup() {
* // Add the grid description and
* // display it for debugging.
* gridOutput(LABEL);
*
* // Draw a couple of shapes.
* background(200);
* fill(255, 0, 0);
* circle(20, 20, 20);
* fill(0, 0, 255);
* square(50, 50, 50);
*
* // Add a general description of the canvas.
* describe('A red circle and a blue square on a gray background.');
* }
*
*
* function draw() {
* // Add the grid description.
* gridOutput();
*
* // Draw a moving circle.
* background(200);
* let x = frameCount * 0.1;
* fill(255, 0, 0);
* circle(x, 20, 20);
* fill(0, 0, 255);
* square(50, 50, 50);
*
* // Add a general description of the canvas.
* describe('A red circle moves from left to right above a blue square.');
* }
*
*
* function draw() {
* // Add the grid description and
* // display it for debugging.
* gridOutput(LABEL);
*
* // Draw a moving circle.
* background(200);
* let x = frameCount * 0.1;
* fill(255, 0, 0);
* circle(x, 20, 20);
* fill(0, 0, 255);
* square(50, 50, 50);
*
* // Add a general description of the canvas.
* describe('A red circle moves from left to right above a blue square.');
* }
*
*
* noStroke();
* const c = color(0, 126, 255, 102);
* fill(c);
* rect(15, 15, 35, 70);
* // Sets 'alphaValue' to 102.
* const alphaValue = alpha(c);
* fill(alphaValue);
* rect(50, 15, 35, 70);
* describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
*
*
* const c = color(175, 100, 220);
* fill(c);
* rect(15, 20, 35, 60);
* // Sets 'blueValue' to 220.
* const blueValue = blue(c);
* fill(0, 0, blueValue);
* rect(50, 20, 35, 60);
* describe('Two rectangles. The left one is light purple and the right one is royal blue.');
*
*
* noStroke();
* colorMode(HSB, 255);
* const c = color(0, 126, 255);
* fill(c);
* rect(15, 20, 35, 60);
* // Sets 'brightValue' to 255.
* const brightValue = brightness(c);
* fill(brightValue);
* rect(50, 20, 35, 60);
* describe('Two rectangles. The left one is salmon pink and the right one is white.');
*
*
* noStroke();
* colorMode(HSB, 255);
* const c = color('hsb(60, 100%, 50%)');
* fill(c);
* rect(15, 20, 35, 60);
* // Sets 'brightValue' to 127.5 (50% of 255)
* const brightValue = brightness(c);
* fill(brightValue);
* rect(50, 20, 35, 60);
* describe('Two rectangles. The left one is olive and the right one is gray.');
*
*
* const c = color(255, 204, 0);
* fill(c);
* noStroke();
* rect(30, 20, 55, 55);
* describe('A yellow rectangle on a gray canvas.');
*
*
* // RGB values.
* let c = color(255, 204, 0);
* fill(c);
* noStroke();
* circle(25, 25, 80);
* // A grayscale value.
* c = color(65);
* fill(c);
* circle(75, 75, 80);
* describe(
* 'Two ellipses. The circle in the top-left corner is yellow and the one at the bottom-right is gray.'
* );
*
*
* // A CSS named color.
* const c = color('magenta');
* fill(c);
* noStroke();
* square(20, 20, 60);
* describe('A magenta square on a gray canvas.');
*
*
* // CSS hex color codes.
* noStroke();
* let c = color('#0f0');
* fill(c);
* rect(0, 10, 45, 80);
* c = color('#00ff00');
* fill(c);
* rect(55, 10, 45, 80);
* describe('Two bright green rectangles on a gray canvas.');
*
*
* // RGB and RGBA color strings.
* noStroke();
* let c = color('rgb(0,0,255)');
* fill(c);
* square(10, 10, 35);
* c = color('rgb(0%, 0%, 100%)');
* fill(c);
* square(55, 10, 35);
* c = color('rgba(0, 0, 255, 1)');
* fill(c);
* square(10, 55, 35);
* c = color('rgba(0%, 0%, 100%, 1)');
* fill(c);
* square(55, 55, 35);
* describe('Four blue squares in corners of a gray canvas.');
*
*
* // HSL and HSLA color strings.
* let c = color('hsl(160, 100%, 50%)');
* noStroke();
* fill(c);
* rect(0, 10, 45, 80);
* c = color('hsla(160, 100%, 50%, 0.5)');
* fill(c);
* rect(55, 10, 45, 80);
* describe('Two sea green rectangles. A darker rectangle on the left and a brighter one on the right.');
*
*
* // HSB and HSBA color strings.
* let c = color('hsb(160, 100%, 50%)');
* noStroke();
* fill(c);
* rect(0, 10, 45, 80);
* c = color('hsba(160, 100%, 50%, 0.5)');
* fill(c);
* rect(55, 10, 45, 80);
* describe('Two green rectangles. A darker rectangle on the left and a brighter one on the right.');
*
*
* // Changing color modes.
* noStroke();
* let c = color(50, 55, 100);
* fill(c);
* rect(0, 10, 45, 80);
* colorMode(HSB, 100);
* c = color(50, 55, 100);
* fill(c);
* rect(55, 10, 45, 80);
* describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');
*
*
* const c = color(20, 75, 200);
* fill(c);
* rect(15, 20, 35, 60);
* // Sets 'greenValue' to 75.
* const greenValue = green(c);
* fill(0, greenValue, 0);
* rect(50, 20, 35, 60);
* describe('Two rectangles. The rectangle on the left is blue and the one on the right is green.');
*
*
* noStroke();
* colorMode(HSB, 255);
* const c = color(0, 126, 255);
* fill(c);
* rect(15, 20, 35, 60);
* // Sets 'hueValue' to 0.
* const hueValue = hue(c);
* fill(hueValue);
* rect(50, 20, 35, 60);
* describe(
* 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
* );
*
*
* colorMode(RGB);
* stroke(255);
* background(51);
* const from = color(218, 165, 32);
* const to = color(72, 61, 139);
* colorMode(RGB);
* const interA = lerpColor(from, to, 0.33);
* const interB = lerpColor(from, to, 0.66);
* fill(from);
* rect(10, 20, 20, 60);
* fill(interA);
* rect(30, 20, 20, 60);
* fill(interB);
* rect(50, 20, 20, 60);
* fill(to);
* rect(70, 20, 20, 60);
* describe(
* 'Four rectangles with white edges. From left to right, the rectangles are tan, brown, brownish purple, and purple.'
* );
*
*
* noStroke();
* colorMode(HSL);
* const c = color(156, 100, 50, 1);
* fill(c);
* rect(15, 20, 35, 60);
* // Sets 'lightValue' to 50.
* const lightValue = lightness(c);
* fill(lightValue);
* rect(50, 20, 35, 60);
* describe('Two rectangles. The rectangle on the left is light green and the one on the right is gray.');
*
*
* const c = color(255, 204, 0);
* fill(c);
* rect(15, 20, 35, 60);
* // Sets 'redValue' to 255.
* const redValue = red(c);
* fill(redValue, 0, 0);
* rect(50, 20, 35, 60);
* describe(
* 'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'
* );
*
*
* noStroke();
* colorMode(HSB, 255);
* const c = color(0, 126, 255);
* fill(c);
* rect(15, 20, 35, 60);
* // Sets 'satValue' to 126.
* const satValue = saturation(c);
* fill(satValue);
* rect(50, 20, 35, 60);
* describe(
* 'Two rectangles. The rectangle on the left is deep pink and the one on the right is gray.'
* );
*
*
* createCanvas(200, 100);
* stroke(255);
* const myColor = color(100, 100, 250);
* fill(myColor);
* rotate(HALF_PI);
* text(myColor.toString(), 0, -5);
* text(myColor.toString('#rrggbb'), 0, -30);
* text(myColor.toString('rgba%'), 0, -55);
* describe('Three text representation of a color written sideways.');
*
*
* const myColor = color(100, 130, 250);
* text(myColor.toString('#rrggbb'), 25, 25);
* describe('A hexadecimal representation of a color.');
*
*
* let backgroundColor;
*
* function setup() {
* backgroundColor = color(100, 50, 150);
* }
*
* function draw() {
* backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
* background(backgroundColor);
* describe('A canvas with a gradually changing background color.');
* }
*
*
* let backgroundColor;
*
* function setup() {
* backgroundColor = color(100, 50, 150);
* }
*
* function draw() {
* backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
* background(backgroundColor);
* describe('A canvas with a gradually changing background color.');
* }
*
*
* let backgroundColor;
*
* function setup() {
* backgroundColor = color(100, 50, 150);
* }
*
* function draw() {
* backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
* background(backgroundColor);
* describe('A canvas with a gradually changing background color.');
* }
*
*
* function draw() {
* clear();
* background(200);
* const squareColor = color(100, 50, 100);
* squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
* fill(squareColor);
* rect(13, 13, width - 26, height - 26);
* describe(
* 'A purple square with gradually changing opacity drawn on a gray background.'
* );
* }
*
*
* // todo
* //
* // describe('');
*
*
* noStroke();
*
* // Mask in some shapes
* push();
* beginClip();
* triangle(15, 37, 30, 13, 43, 37);
* circle(45, 45, 7);
* endClip();
*
* fill('red');
* rect(5, 5, 45, 45);
* pop();
*
* translate(50, 50);
*
* // Mask out the same shapes
* push();
* beginClip({ invert: true });
* triangle(15, 37, 30, 13, 43, 37);
* circle(45, 45, 7);
* endClip();
*
* fill('red');
* rect(5, 5, 45, 45);
* pop();
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(255);
* noStroke();
*
* beginClip();
* push();
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* scale(0.5);
* torus(30, 15);
* pop();
* endClip();
*
* beginShape(QUAD_STRIP);
* fill(0, 255, 255);
* vertex(-width/2, -height/2);
* vertex(width/2, -height/2);
* fill(100, 0, 100);
* vertex(-width/2, height/2);
* vertex(width/2, height/2);
* endShape();
* }
*
*
* noStroke();
*
* // Mask in some shapes
* push();
* clip(() => {
* triangle(15, 37, 30, 13, 43, 37);
* circle(45, 45, 7);
* });
*
* fill('red');
* rect(5, 5, 45, 45);
* pop();
*
* translate(50, 50);
*
* // Mask out the same shapes
* push();
* clip(() => {
* triangle(15, 37, 30, 13, 43, 37);
* circle(45, 45, 7);
* }, { invert: true });
*
* fill('red');
* rect(5, 5, 45, 45);
* pop();
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(255);
* noStroke();
*
* clip(() => {
* push();
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* scale(0.5);
* torus(30, 15);
* pop();
* });
*
* beginShape(QUAD_STRIP);
* fill(0, 255, 255);
* vertex(-width/2, -height/2);
* vertex(width/2, -height/2);
* fill(100, 0, 100);
* vertex(-width/2, height/2);
* vertex(width/2, height/2);
* endShape();
* }
*
*
* // A grayscale integer value.
* background(51);
* describe('A canvas with a dark charcoal gray background.');
*
*
* // A grayscale integer value and an alpha value.
* background(51, 0.4);
* describe('A canvas with a transparent gray background.');
*
*
* // R, G & B integer values.
* background(255, 204, 0);
* describe('A canvas with a yellow background.');
*
*
* // H, S & B integer values.
* colorMode(HSB);
* background(255, 204, 100);
* describe('A canvas with a royal blue background.');
*
*
* // A CSS named color.
* background('red');
* describe('A canvas with a red background.');
*
*
* // Three-digit hex RGB notation.
* background('#fae');
* describe('A canvas with a pink background.');
*
*
* // Six-digit hex RGB notation.
* background('#222222');
* describe('A canvas with a black background.');
*
*
* // Integer RGB notation.
* background('rgb(0,255,0)');
* describe('A canvas with a bright green background.');
*
*
* // Integer RGBA notation.
* background('rgba(0,255,0, 0.25)');
* describe('A canvas with a transparent green background.');
*
*
* // Percentage RGB notation.
* background('rgb(100%,0%,10%)');
* describe('A canvas with a red background.');
*
*
* // Percentage RGBA notation.
* background('rgba(100%,0%,100%,0.5)');
* describe('A canvas with a transparent purple background.');
*
*
* // A p5.Color object.
* let c = color(0, 0, 255);
* background(c);
* describe('A canvas with a blue background.');
*
*
* function draw() {
* circle(mouseX, mouseY, 20);
* describe('A white circle is drawn at the mouse x- and y-coordinates.');
* }
*
* function mousePressed() {
* clear();
* background(128);
* describe('The canvas is cleared when the mouse is clicked.');
* }
*
*
* let pg;
*
* function setup() {
* createCanvas(100, 100);
* background(200);
*
* pg = createGraphics(60, 60);
* pg.background(200);
* pg.noStroke();
* pg.circle(pg.width / 2, pg.height / 2, 15);
* image(pg, 20, 20);
* describe('A white circle drawn on a gray square. The square gets smaller when the mouse is pressed.');
* }
*
* function mousePressed() {
* clear();
* image(pg, 20, 20);
* }
*
*
* noStroke();
* colorMode(RGB, 100);
* for (let i = 0; i < 100; i += 1) {
* for (let j = 0; j < 100; j += 1) {
* stroke(i, j, 0);
* point(i, j);
* }
* }
* describe(
* 'A diagonal green to red gradient from bottom-left to top-right with shading transitioning to black at top-left corner.'
* );
*
*
* noStroke();
* colorMode(HSB, 100);
* for (let i = 0; i < 100; i++) {
* for (let j = 0; j < 100; j++) {
* stroke(i, j, 100);
* point(i, j);
* }
* }
* describe('A rainbow gradient from left-to-right. Brightness transitions to white at the top.');
*
*
* colorMode(RGB, 255);
* let myColor = color(180, 175, 230);
* background(myColor);
* colorMode(RGB, 1);
* let redValue = red(myColor);
* let greenValue = green(myColor);
* let blueValue = blue(myColor);
* text(`Red: ${redValue}`, 10, 10, 80, 80);
* text(`Green: ${greenValue}`, 10, 40, 80, 80);
* text(`Blue: ${blueValue}`, 10, 70, 80, 80);
* describe('A purple canvas with the red, green, and blue decimal values of the color written on it.');
*
*
* noFill();
* colorMode(RGB, 255, 255, 255, 1);
* background(255);
* strokeWeight(4);
* stroke(255, 0, 10, 0.3);
* circle(40, 40, 50);
* circle(50, 60, 50);
* describe('Two overlapping translucent pink circle outlines.');
*
*
* // Grayscale integer value.
* fill(51);
* square(20, 20, 60);
* describe('A dark charcoal gray square with a black outline.');
*
*
* // R, G & B integer values.
* fill(255, 204, 0);
* square(20, 20, 60);
* describe('A yellow square with a black outline.');
*
*
* // H, S & B integer values.
* colorMode(HSB);
* fill(255, 204, 100);
* square(20, 20, 60);
* describe('A royal blue square with a black outline.');
*
*
* // A CSS named color.
* fill('red');
* square(20, 20, 60);
* describe('A red square with a black outline.');
*
*
* // Three-digit hex RGB notation.
* fill('#fae');
* square(20, 20, 60);
* describe('A pink square with a black outline.');
*
*
* // Six-digit hex RGB notation.
* fill('#A251FA');
* square(20, 20, 60);
* describe('A purple square with a black outline.');
*
*
* // Integer RGB notation.
* fill('rgb(0,255,0)');
* square(20, 20, 60);
* describe('A bright green square with a black outline.');
*
*
* // Integer RGBA notation.
* fill('rgba(0,255,0, 0.25)');
* square(20, 20, 60);
* describe('A soft green rectange with a black outline.');
*
*
* // Percentage RGB notation.
* fill('rgb(100%,0%,10%)');
* square(20, 20, 60);
* describe('A red square with a black outline.');
*
*
* // Percentage RGBA notation.
* fill('rgba(100%,0%,100%,0.5)');
* square(20, 20, 60);
* describe('A dark fuchsia square with a black outline.');
*
*
* // p5.Color object.
* let c = color(0, 0, 255);
* fill(c);
* square(20, 20, 60);
* describe('A blue square with a black outline.');
*
*
* square(32, 10, 35);
* noFill();
* square(32, 55, 35);
* describe('A white square on top of an empty square. Both squares have black outlines.');
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(0);
* noFill();
* stroke(100, 100, 240);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* box(45, 45, 45);
* describe('A purple cube wireframe spinning on a black canvas.');
* }
*
*
* noStroke();
* square(20, 20, 60);
* describe('A white square with no outline.');
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(0);
* noStroke();
* fill(240, 150, 150);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* box(45, 45, 45);
* describe('A pink cube with no edge outlines spinning on a black canvas.');
* }
*
*
* // Grayscale integer value.
* strokeWeight(4);
* stroke(51);
* rect(20, 20, 60, 60);
* describe('A white rectangle with a dark charcoal gray outline.');
*
*
* // R, G & B integer values.
* stroke(255, 204, 0);
* strokeWeight(4);
* rect(20, 20, 60, 60);
* describe('A white rectangle with a yellow outline.');
*
*
* // H, S & B integer values.
* colorMode(HSB);
* strokeWeight(4);
* stroke(255, 204, 100);
* rect(20, 20, 60, 60);
* describe('A white rectangle with a royal blue outline.');
*
*
* // A CSS named color.
* stroke('red');
* strokeWeight(4);
* rect(20, 20, 60, 60);
* describe('A white rectangle with a red outline.');
*
*
* // Three-digit hex RGB notation.
* stroke('#fae');
* strokeWeight(4);
* rect(20, 20, 60, 60);
* describe('A white rectangle with a pink outline.');
*
*
* // Six-digit hex RGB notation.
* stroke('#222222');
* strokeWeight(4);
* rect(20, 20, 60, 60);
* describe('A white rectangle with a black outline.');
*
*
* // Integer RGB notation.
* stroke('rgb(0,255,0)');
* strokeWeight(4);
* rect(20, 20, 60, 60);
* describe('A whiite rectangle with a bright green outline.');
*
*
* // Integer RGBA notation.
* stroke('rgba(0,255,0,0.25)');
* strokeWeight(4);
* rect(20, 20, 60, 60);
* describe('A white rectangle with a soft green outline.');
*
*
* // Percentage RGB notation.
* stroke('rgb(100%,0%,10%)');
* strokeWeight(4);
* rect(20, 20, 60, 60);
* describe('A white rectangle with a red outline.');
*
*
* // Percentage RGBA notation.
* stroke('rgba(100%,0%,100%,0.5)');
* strokeWeight(4);
* rect(20, 20, 60, 60);
* describe('A white rectangle with a dark fuchsia outline.');
*
*
* // p5.Color object.
* stroke(color(0, 0, 255));
* strokeWeight(4);
* rect(20, 20, 60, 60);
* describe('A white rectangle with a blue outline.');
*
*
* background(100, 100, 250);
* fill(250, 100, 100);
* square(20, 20, 60);
* erase();
* circle(25, 30, 30);
* noErase();
* describe('A purple canvas with a pink square in the middle. A circle is erased from the top-left, leaving a white hole.');
*
*
* let p = createP('I am a DOM element');
* p.style('font-size', '12px');
* p.style('width', '65px');
* p.style('text-align', 'center');
* p.position(18, 26);
*
* background(100, 170, 210);
* erase(200, 100);
* circle(50, 50, 77);
* noErase();
* describe('A blue canvas with a circular hole in the center that reveals the message "I am a DOM element".');
*
*
* background(150, 250, 150);
* fill(100, 100, 250);
* square(20, 20, 60);
* strokeWeight(5);
* erase(150, 255);
* triangle(50, 10, 70, 50, 90, 10);
* noErase();
* describe('A mint green canvas with a purple square in the center. A triangle in the top-right corner partially erases its interior and a fully erases its outline.');
*
*
* background(235, 145, 15);
* noStroke();
* fill(30, 45, 220);
* rect(30, 10, 10, 80);
* erase();
* circle(50, 50, 60);
* noErase();
* rect(70, 10, 10, 80);
* describe('An orange canvas with two tall blue rectangles. A circular hole in the center erases the rectangle on the left but not the one on the right.');
*
*
* arc(50, 50, 80, 80, 0, HALF_PI);
*
* arc(50, 50, 80, 80, 0, PI);
*
* arc(50, 50, 80, 80, 0, QUARTER_PI);
*
* arc(50, 50, 80, 80, 0, TAU);
*
* arc(50, 50, 80, 80, 0, TWO_PI);
*
* function setup() {
* angleMode(DEGREES);
* }
*
* function setup() {
* angleMode(RADIANS);
* }
*
* function setup() {
* // Prints "hello, world" to the console.
* print('hello, world');
* }
*
*
* function setup() {
* let name = 'ada';
* // Prints "hello, ada" to the console.
* print(`hello, ${name}`);
* }
*
*
* function setup() {
* background(200);
*
* // Display the value of
* // frameCount.
* textSize(30);
* textAlign(CENTER, CENTER);
* text(frameCount, 50, 50);
*
* describe('The number 0 written in black in the middle of a gray square.');
* }
*
*
* function setup() {
* // Set the frameRate to 30.
* frameRate(30);
*
* textSize(30);
* textAlign(CENTER, CENTER);
* }
*
* function draw() {
* background(200);
*
* // Display the value of
* // frameCount.
* text(frameCount, 50, 50);
*
* describe('A number written in black in the middle of a gray square. Its value increases rapidly.');
* }
*
*
* let x = 0;
* let speed = 0.05;
*
* function setup() {
* // Set the frameRate to 30.
* frameRate(30);
* }
*
* function draw() {
* background(200);
*
* // Use deltaTime to calculate
* // a change in position.
* let deltaX = speed * deltaTime;
*
* // Update the x variable.
* x += deltaX;
*
* // Reset x to 0 if it's
* // greater than 100.
* if (x > 100) {
* x = 0;
* }
*
* // Use x to set the circle's
* // position.
* circle(x, 50, 20);
*
* describe('A white circle moves from left to right on a gray background. It reappears on the left side when it reaches the right side.');
* }
*
*
* // Open this example in two separate browser
* // windows placed side-by-side to demonstrate.
*
* function draw() {
* // Change the background color
* // when the browser window
* // goes in/out of focus.
* if (focused === true) {
* background(0, 255, 0);
* } else {
* background(255, 0, 0);
* }
*
* describe('A square changes color from green to red when the browser window is out of focus.');
* }
*
*
* function draw() {
* background(200);
*
* // Set the cursor to crosshairs: +
* cursor(CROSS);
*
* describe('A gray square. The cursor appears as crosshairs.');
* }
*
*
* function draw() {
* background(200);
*
* // Divide the canvas into quadrants.
* line(50, 0, 50, 100);
* line(0, 50, 100, 50);
*
* // Change cursor based on mouse position.
* if (mouseX < 50 && mouseY < 50) {
* cursor(CROSS);
* } else if (mouseX > 50 && mouseY < 50) {
* cursor('progress');
* } else if (mouseX > 50 && mouseY > 50) {
* cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
* } else {
* cursor('grab');
* }
*
* describe('A gray square divided into quadrants. The cursor image changes when the mouse moves to each quadrant.');
* }
*
*
* function draw() {
* background(200);
*
* // Change the cursor's active spot
* // when the mouse is pressed.
* if (mouseIsPressed === true) {
* cursor('https://avatars0.githubusercontent.com/u/1617169?s=16', 8, 8);
* } else {
* cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');
* }
*
* describe('An image of three purple curves follows the mouse. The image shifts when the mouse is pressed.');
* }
*
*
* function draw() {
* background(200);
*
* // Set the x variable based
* // on the current frameCount.
* let x = frameCount % 100;
*
* // If the mouse is pressed,
* // decrease the frame rate.
* if (mouseIsPressed === true) {
* frameRate(10);
* } else {
* frameRate(60);
* }
*
* // Use x to set the circle's
* // position.
* circle(x, 50, 20);
*
* describe('A white circle on a gray background. The circle moves from left to right in a loop. It slows down when the mouse is pressed.');
* }
*
*
* function draw() {
* background(200);
*
* // If the mouse is pressed, do lots
* // of math to slow down drawing.
* if (mouseIsPressed === true) {
* for (let i = 0; i < 1000000; i += 1) {
* random();
* }
* }
*
* // Get the current frame rate
* // and display it.
* let fps = frameRate();
* text(fps, 50, 50);
*
* describe('A number written in black written on a gray background. The number decreases when the mouse is pressed.');
* }
*
*
* function draw() {
* background(200);
*
* // Set the frame rate to 20.
* frameRate(20);
*
* // Get the target frame rate and
* // display it.
* let fps = getTargetFrameRate();
* text(fps, 43, 54);
*
* describe('The number 20 written in black on a gray background.');
* }
*
*
* function setup() {
* // Hide the cursor.
* noCursor();
* }
*
* function draw() {
* background(200);
*
* circle(mouseX, mouseY, 10);
*
* describe('A white circle on a gray background. The circle follows the mouse as it moves. The cursor is hidden.');
* }
*
*
* function setup() {
* background(200);
*
* // Display the current WebGL version.
* text(webglVersion, 42, 54);
*
* describe('The text "p2d" written in black on a gray background.');
* }
*
*
* let font;
*
* function preload() {
* // Load a font to use.
* font = loadFont('assets/inconsolata.otf');
* }
*
* function setup() {
* // Create a canvas using WEBGL mode.
* createCanvas(100, 50, WEBGL);
* background(200);
*
* // Display the current WebGL version.
* fill(0);
* textFont(font);
* text(webglVersion, -15, 5);
*
* describe('The text "webgl2" written in black on a gray background.');
* }
*
*
* let font;
*
* function preload() {
* // Load a font to use.
* font = loadFont('assets/inconsolata.otf');
* }
*
* function setup() {
* // Create a canvas using WEBGL mode.
* createCanvas(100, 50, WEBGL);
*
* // Set WebGL to version 1.
* setAttributes({ version: 1 });
*
* background(200);
*
* // Display the current WebGL version.
* fill(0);
* textFont(font);
* text(webglVersion, -14, 5);
*
* describe('The text "webgl" written in black on a gray background.');
* }
*
*
* function setup() {
* // Set the canvas' width and height
* // using the display's dimensions.
* createCanvas(displayWidth, displayHeight);
*
* background(200);
*
* describe('A gray canvas that is the same size as the display.');
* }
*
*
* function setup() {
* // Set the canvas' width and height
* // using the display's dimensions.
* createCanvas(displayWidth, displayHeight);
*
* background(200);
*
* describe('A gray canvas that is the same size as the display.');
* }
*
*
* function setup() {
* // Set the canvas' width and height
* // using the browser's dimensions.
* createCanvas(windowWidth, windowHeight);
*
* background(200);
*
* describe('A gray canvas that takes up the entire browser window.');
* }
*
*
* function setup() {
* // Set the canvas' width and height
* // using the browser's dimensions.
* createCanvas(windowWidth, windowHeight);
*
* background(200);
*
* describe('A gray canvas that takes up the entire browser window.');
* }
*
*
* function setup() {
* createCanvas(windowWidth, windowHeight);
* }
*
* function draw() {
* background(200);
*
* describe('A gray canvas that takes up the entire browser window. It changes size to match the browser window.');
* }
*
* // Resize the canvas when the
* // browser's size changes.
* function windowResized() {
* resizeCanvas(windowWidth, windowHeight);
* }
*
*
* function setup() {
* createCanvas(windowWidth, windowHeight);
* }
*
* function draw() {
* background(200);
*
* describe('A gray canvas that takes up the entire browser window. It changes size to match the browser window.');
* }
*
* function windowResized(event) {
* // Resize the canvas when the
* // browser's size changes.
* resizeCanvas(windowWidth, windowHeight);
*
* // Print the resize event to the console for debugging.
* print(event);
* }
*
*
* function setup() {
* background(200);
*
* // Display the canvas' width.
* text(width, 42, 54);
*
* describe('The number 100 written in black on a gray square.');
* }
*
*
* function setup() {
* createCanvas(50, 100);
*
* background(200);
*
* // Display the canvas' width.
* text(width, 21, 54);
*
* describe('The number 50 written in black on a gray rectangle.');
* }
*
*
* function setup() {
* createCanvas(100, 100);
*
* background(200);
*
* // Display the canvas' width.
* text(width, 42, 54);
*
* describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');
* }
*
* // If the mouse is pressed, reisze
* // the canvas and display its new
* // width.
* function mousePressed() {
* if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
* resizeCanvas(50, 100);
* background(200);
* text(width, 21, 54);
* }
* }
*
*
* function setup() {
* background(200);
*
* // Display the canvas' height.
* text(height, 42, 54);
*
* describe('The number 100 written in black on a gray square.');
* }
*
*
* function setup() {
* createCanvas(100, 50);
*
* background(200);
*
* // Display the canvas' height.
* text(height, 42, 27);
*
* describe('The number 50 written in black on a gray rectangle.');
* }
*
*
* function setup() {
* createCanvas(100, 100);
*
* background(200);
*
* // Display the canvas' height.
* text(height, 42, 54);
*
* describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');
* }
*
* // If the mouse is pressed, reisze
* // the canvas and display its new
* // height.
* function mousePressed() {
* if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
* resizeCanvas(100, 50);
* background(200);
* text(height, 42, 27);
* }
* }
*
*
* function setup() {
* background(200);
*
* describe('A gray canvas that switches between default and full-screen display when clicked.');
* }
*
* // If the mouse is pressed,
* // toggle full-screen mode.
* function mousePressed() {
* if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
* let fs = fullscreen();
* fullscreen(!fs);
* }
* }
*
*
* function setup() {
* // Set the pixel density to 1.
* pixelDensity(1);
*
* // Create a canvas and draw
* // a circle.
* createCanvas(100, 100);
* background(200);
* circle(50, 50, 70);
*
* describe('A fuzzy white circle on a gray canvas.');
* }
*
*
* function setup() {
* // Set the pixel density to 3.
* pixelDensity(3);
*
* // Create a canvas, paint the
* // background, and draw a
* // circle.
* createCanvas(100, 100);
* background(200);
* circle(50, 50, 70);
*
* describe('A sharp white circle on a gray canvas.');
* }
*
*
* function setup() {
* // Set the pixel density to 1.
* pixelDensity(1);
*
* // Create a canvas and draw
* // a circle.
* createCanvas(100, 100);
* background(200);
* circle(50, 50, 70);
*
* describe('A fuzzy white circle drawn on a gray background. The circle becomes sharper when the mouse is pressed.');
* }
*
* function mousePressed() {
* // Get the current display density.
* let d = displayDensity();
*
* // Use the display density to set
* // the sketch's pixel density.
* pixelDensity(d);
*
* // Paint the background and
* // draw a circle.
* background(200);
* circle(50, 50, 70);
* }
*
*
* function setup() {
* background(200);
*
* // Get the sketch's URL
* // and display it.
* let url = getURL();
* textWrap(CHAR);
* text(url, 0, 40, 100);
*
* describe('The URL "https://p5js.org/reference/#/p5/getURL" written in black on a gray background.');
* }
*
*
* function setup() {
* background(200);
*
* // Get the sketch's URL path
* // and display the first
* // part.
* let path = getURLPath();
* text(path[0], 25, 54);
*
* describe('The word "reference" written in black on a gray background.');
* }
*
*
* // Imagine this sketch is hosted at the following URL:
* // https://p5js.org?year=2014&month=May&day=15
*
* function setup() {
* background(200);
*
* // Get the sketch's URL
* // parameters and display
* // them.
* let params = getURLParams();
* text(params.day, 10, 20);
* text(params.month, 10, 40);
* text(params.year, 10, 60);
*
* describe('The text "15", "May", and "2014" written in black on separate lines.');
* }
*
*
* let img;
* let c;
* function preload() {
* // preload() runs once
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* // setup() waits until preload() is done
* img.loadPixels();
* // get color of middle pixel
* c = img.get(img.width / 2, img.height / 2);
* }
*
* function draw() {
* background(c);
* image(img, 25, 25, 50, 50);
* }
*
* let a = 0;
*
* function setup() {
* background(0);
* noStroke();
* fill(102);
* }
*
* function draw() {
* rect(a++ % width, 10, 2, 80);
* }
*
* let yPos = 0;
* function setup() {
* // setup() runs once
* frameRate(30);
* }
* function draw() {
* // draw() loops forever, until stopped
* background(204);
* yPos = yPos - 1;
* if (yPos < 0) {
* yPos = height;
* }
* line(0, yPos, width, yPos);
* }
*
* function draw() {
* ellipse(50, 50, 10, 10);
* }
*
* function mousePressed() {
* remove(); // remove whole sketch on mouse press
* }
*
* p5.disableFriendlyErrors = true;
*
* function setup() {
* createCanvas(100, 50);
* }
*
* function setup() {
* createCanvas(100, 100);
*
* background(200);
*
* // Create a button element and
* // place it beneath the canvas.
* let btn = createButton('change');
* btn.position(0, 100);
*
* // Call randomColor() when
* // the button is pressed.
* btn.mousePressed(randomColor);
*
* describe('A gray square with a button that says "change" beneath it. The square changes color when the user presses the button.');
* }
*
* // Paint the background either
* // red, yellow, blue, or green.
* function randomColor() {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Set the border style for the
* // canvas.
* cnv.elt.style.border = '5px dashed deeppink';
*
* describe('A gray square with a pink border drawn with dashed lines.');
* }
*
*
* function setup() {
* background(200);
*
* // Create a div element.
* let div = createDiv();
* // Place the div in the top-left corner.
* div.position(10, 20);
* // Set its width and height.
* div.size(80, 60);
* // Set its background color to white
* div.style('background-color', 'white');
* // Align any text to the center.
* div.style('text-align', 'center');
* // Set its ID to "container".
* div.id('container');
*
* // Create a paragraph element.
* let p = createP('p5*js');
* // Make the div its parent
* // using its ID "container".
* p.parent('container');
*
* describe('The text "p5*js" written in black at the center of a white rectangle. The rectangle is inside a gray square.');
* }
*
*
* function setup() {
* background(200);
*
* // Create rectangular div element.
* let div = createDiv();
* // Place the div in the top-left corner.
* div.position(10, 20);
* // Set its width and height.
* div.size(80, 60);
* // Set its background color and align
* // any text to the center.
* div.style('background-color', 'white');
* div.style('text-align', 'center');
*
* // Create a paragraph element.
* let p = createP('p5*js');
* // Make the div its parent.
* p.parent(div);
*
* describe('The text "p5*js" written in black at the center of a white rectangle. The rectangle is inside a gray square.');
* }
*
*
* function setup() {
* background(200);
*
* // Create rectangular div element.
* let div = createDiv();
* // Place the div in the top-left corner.
* div.position(10, 20);
* // Set its width and height.
* div.size(80, 60);
* // Set its background color and align
* // any text to the center.
* div.style('background-color', 'white');
* div.style('text-align', 'center');
*
* // Create a paragraph element.
* let p = createP('p5*js');
* // Make the div its parent
* // using the underlying
* // HTMLElement.
* p.parent(div.elt);
*
* describe('The text "p5*js" written in black at the center of a white rectangle. The rectangle is inside a gray square.');
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Set the canvas' ID
* // to "mycanvas".
* cnv.id('mycanvas');
*
* // Get the canvas' ID.
* let id = cnv.id();
* text(id, 24, 54);
*
* describe('The text "mycanvas" written in black on a gray background.');
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Add the class "small" to the
* // canvas element.
* cnv.class('small');
*
* // Get the canvas element's class
* // and display it.
* let c = cnv.class();
* text(c, 35, 54);
*
* describe('The word "small" written in black on a gray canvas.');
*
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Call randomColor() when the canvas
* // is pressed.
* cnv.mousePressed(randomColor);
*
* describe('A gray square changes color when the mouse is pressed.');
* }
*
* // Paint the background either
* // red, yellow, blue, or green.
* function randomColor() {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Paint the background either
* // red, yellow, blue, or green
* // when the canvas is pressed.
* cnv.mousePressed(() => {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* });
*
* describe('A gray square changes color when the mouse is pressed.');
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Call randomColor() when the
* // canvas is double-clicked.
* cnv.doubleClicked(randomColor);
*
* describe('A gray square changes color when the user double-clicks the canvas.');
* }
*
* // Paint the background either
* // red, yellow, blue, or green.
* function randomColor() {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Paint the background either
* // red, yellow, blue, or green
* // when the canvas is double-clicked.
* cnv.doubleClicked(() => {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* });
*
* describe('A gray square changes color when the user double-clicks the canvas.');
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Call randomColor() when the
* // mouse wheel moves.
* cnv.mouseWheel(randomColor);
*
* describe('A gray square changes color when the user scrolls the mouse wheel over the canvas.');
* }
*
* // Paint the background either
* // red, yellow, blue, or green.
* function randomColor() {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Paint the background either
* // red, yellow, blue, or green
* // when the mouse wheel moves.
* cnv.mouseWheel(() => {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* });
*
* describe('A gray square changes color when the user scrolls the mouse wheel over the canvas.');
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Call changeBackground() when the
* // mouse wheel moves.
* cnv.mouseWheel(changeBackground);
*
* describe('A gray square. When the mouse wheel scrolls over the square, it changes color and displays shapes.');
* }
*
* function changeBackground(event) {
* // Change the background color
* // based on deltaY.
* if (event.deltaY > 0) {
* background('deeppink');
* } else if (event.deltaY < 0) {
* background('cornflowerblue');
* } else {
* background(200);
* }
*
* // Draw a shape based on deltaX.
* if (event.deltaX > 0) {
* circle(50, 50, 20);
* } else if (event.deltaX < 0) {
* square(40, 40, 20);
* }
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Call randomColor() when a
* // mouse press ends.
* cnv.mouseReleased(randomColor);
*
* describe('A gray square changes color when the user releases a mouse press.');
* }
*
* // Paint the background either
* // red, yellow, blue, or green.
* function randomColor() {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Paint the background either
* // red, yellow, blue, or green
* // when a mouse press ends.
* cnv.mouseReleased(() => {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* });
*
* describe('A gray square changes color when the user releases a mouse press.');
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Call randomColor() when a
* // mouse press ends.
* cnv.mouseClicked(randomColor);
*
* describe('A gray square changes color when the user releases a mouse press.');
* }
*
* // Paint the background either
* // red, yellow, blue, or green.
* function randomColor() {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Paint the background either
* // red, yellow, blue, or green
* // when a mouse press ends.
* cnv.mouseClicked(() => {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* });
*
* describe('A gray square changes color when the user releases a mouse press.');
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Call randomColor() when the
* // mouse moves.
* cnv.mouseMoved(randomColor);
*
* describe('A gray square changes color when the mouse moves over the canvas.');
* }
*
* // Paint the background either
* // red, yellow, blue, or green.
* function randomColor() {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Paint the background either
* // red, yellow, blue, or green
* // when the mouse moves.
* cnv.mouseMoved(() => {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* });
*
* describe('A gray square changes color when the mouse moves over the canvas.');
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Call randomColor() when the
* // mouse moves onto the canvas.
* cnv.mouseOver(randomColor);
*
* describe('A gray square changes color when the mouse moves onto the canvas.');
* }
*
* // Paint the background either
* // red, yellow, blue, or green.
* function randomColor() {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Paint the background either
* // red, yellow, blue, or green
* // when the mouse moves onto
* // the canvas.
* cnv.mouseOver(() => {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* });
*
* describe('A gray square changes color when the mouse moves onto the canvas.');
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Call randomColor() when the
* // mouse moves off the canvas.
* cnv.mouseOut(randomColor);
*
* describe('A gray square changes color when the mouse moves off the canvas.');
* }
*
* // Paint the background either
* // red, yellow, blue, or green.
* function randomColor() {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Paint the background either
* // red, yellow, blue, or green
* // when the mouse moves off
* // the canvas.
* cnv.mouseOut(() => {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* });
*
* describe('A gray square changes color when the mouse moves off the canvas.');
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Call randomColor() when the
* // user touches the canvas.
* cnv.touchStarted(randomColor);
*
* describe('A gray square changes color when the user touches the canvas.');
* }
*
* // Paint the background either
* // red, yellow, blue, or green.
* function randomColor() {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Paint the background either
* // red, yellow, blue, or green
* // when the user touches the
* // canvas.
* cnv.touchStarted(() => {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* });
*
* describe('A gray square changes color when the user touches the canvas.');
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Call randomColor() when the
* // user touches the canvas
* // and moves.
* cnv.touchMoved(randomColor);
*
* describe('A gray square changes color when the user touches the canvas and moves.');
* }
*
* // Paint the background either
* // red, yellow, blue, or green.
* function randomColor() {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Paint the background either
* // red, yellow, blue, or green
* // when the user touches the
* // canvas and moves.
* cnv.touchMoved(() => {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* });
*
* describe('A gray square changes color when the user touches the canvas and moves.');
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Call randomColor() when the
* // user touches the canvas,
* // then lifts their finger.
* cnv.touchEnded(randomColor);
*
* describe('A gray square changes color when the user touches the canvas, then lifts their finger.');
* }
*
* // Paint the background either
* // red, yellow, blue, or green.
* function randomColor() {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* }
*
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Paint the background either
* // red, yellow, blue, or green
* // when the user touches the
* // canvas, then lifts their
* // finger.
* cnv.touchEnded(() => {
* let c = random(['red', 'yellow', 'blue', 'green']);
* background(c);
* });
*
* describe('A gray square changes color when the user touches the canvas, then lifts their finger.');
* }
*
*
* // Drag a file over the canvas to test.
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Call helloFile() when a
* // file is dragged over
* // the canvas.
* cnv.dragOver(helloFile);
*
* describe('A gray square. The text "hello, file" appears when a file is dragged over the square.');
* }
*
* function helloFile() {
* text('hello, file', 50, 50);
* }
*
*
* // Drag a file over the canvas to test.
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Say "hello, file" when a
* // file is dragged over
* // the canvas.
* cnv.dragOver(() => {
* text('hello, file', 50, 50);
* });
*
* describe('A gray square. The text "hello, file" appears when a file is dragged over the square.');
* }
*
*
* // Drag a file over, then off
* // the canvas to test.
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Call byeFile() when a
* // file is dragged over,
* // then off the canvas.
* cnv.dragLeave(byeFile);
*
* describe('A gray square. The text "bye, file" appears when a file is dragged over, then off the square.');
* }
*
* function byeFile() {
* text('bye, file', 50, 50);
* }
*
*
* // Drag a file over, then off
* // the canvas to test.
*
* function setup() {
* // Create a canvas element and
* // assign it to cnv.
* let cnv = createCanvas(100, 100);
*
* background(200);
*
* // Say "bye, file" when a
* // file is dragged over,
* // then off the canvas.
* cnv.dragLeave(() => {
* text('bye, file', 50, 50);
* });
*
* describe('A gray square. The text "bye, file" appears when a file is dragged over, then off the square.');
* }
*
*
* let pg;
* function setup() {
* createCanvas(100, 100);
* background(0);
* pg = createGraphics(50, 100);
* pg.fill(0);
* frameRate(5);
* }
*
* function draw() {
* image(pg, width / 2, 0);
* pg.background(255);
* // p5.Graphics object behave a bit differently in some cases
* // The normal canvas on the left resets the translate
* // with every loop through draw()
* // the graphics object on the right doesn't automatically reset
* // so translate() is additive and it moves down the screen
* rect(0, 0, width / 2, 5);
* pg.rect(0, 0, width / 2, 5);
* translate(0, 5, 0);
* pg.translate(0, 5, 0);
* }
* function mouseClicked() {
* // if you click you will see that
* // reset() resets the translate back to the initial state
* // of the Graphics object
* pg.reset();
* }
*
* let bg;
* function setup() {
* bg = createCanvas(100, 100);
* bg.background(0);
* image(bg, 0, 0);
* bg.remove();
* }
*
* let bg;
* function setup() {
* pixelDensity(1);
* createCanvas(100, 100);
* stroke(255);
* fill(0);
*
* // create and draw the background image
* bg = createGraphics(100, 100);
* bg.background(200);
* bg.ellipse(50, 50, 80, 80);
* }
* function draw() {
* let t = millis() / 1000;
* // draw the background
* if (bg) {
* image(bg, frameCount % 100, 0);
* image(bg, frameCount % 100 - 100, 0);
* }
* // draw the foreground
* let p = p5.Vector.fromAngle(t, 35).add(50, 50);
* ellipse(p.x, p.y, 30);
* }
* function mouseClicked() {
* // remove the background
* if (bg) {
* bg.remove();
* bg = null;
* }
* }
*
* function setup() {
* createCanvas(100, 50);
* background(153);
* line(0, 0, width, height);
* }
*
*
* function setup() {
* createCanvas(windowWidth, windowHeight);
* }
*
* function draw() {
* background(0, 100, 200);
* }
*
* function windowResized() {
* resizeCanvas(windowWidth, windowHeight);
* }
*
* function setup() {
* noCanvas();
* }
*
*
* let pg;
* function setup() {
* createCanvas(100, 100);
* pg = createGraphics(100, 100);
* }
*
* function draw() {
* background(200);
* pg.background(100);
* pg.noStroke();
* pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);
* image(pg, 50, 50);
* image(pg, 0, 0, 50, 50);
* }
*
*
* let prev, next;
* function setup() {
* createCanvas(100, 100, WEBGL);
* prev = createFramebuffer({ format: FLOAT });
* next = createFramebuffer({ format: FLOAT });
* noStroke();
* }
*
* function draw() {
* // Swap prev and next so that we can use the previous
* // frame as a texture when drawing the current frame
* [prev, next] = [next, prev];
*
* // Draw to the framebuffer
* next.begin();
* background(255);
*
* push();
* tint(255, 253);
* image(prev, -width/2, -height/2);
* // Make sure the image plane doesn't block you from seeing any part
* // of the scene
* clearDepth();
* pop();
*
* push();
* normalMaterial();
* translate(25*sin(frameCount * 0.014), 25*sin(frameCount * 0.02), 0);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* box(12);
* pop();
* next.end();
*
* image(next, -width/2, -height/2);
* }
*
*
* let prev, next;
* function setup() {
* createCanvas(100, 100, WEBGL);
* prev = createFramebuffer({ format: FLOAT });
* next = createFramebuffer({ format: FLOAT });
* noStroke();
* }
*
* function draw() {
* // Swap prev and next so that we can use the previous
* // frame as a texture when drawing the current frame
* [prev, next] = [next, prev];
*
* // Draw to the framebuffer
* next.begin();
* background(255);
*
* push();
* tint(255, 253);
* image(prev, -width/2, -height/2);
* // Make sure the image plane doesn't block you from seeing any part
* // of the scene
* clearDepth();
* pop();
*
* push();
* normalMaterial();
* translate(25*sin(frameCount * 0.014), 25*sin(frameCount * 0.02), 0);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* box(12);
* pop();
* next.end();
*
* image(next, -width/2, -height/2);
* }
*
* BLEND - linear interpolation of colours: C =
* A*factor + B. This is the default blending mode.ADD - sum of A and BDARKEST - only the darkest colour succeeds: C =
* min(A*factor, B).LIGHTEST - only the lightest colour succeeds: C =
* max(A*factor, B).DIFFERENCE - subtract colors from underlying image.
* (2D)EXCLUSION - similar to DIFFERENCE, but less
* extreme.MULTIPLY - multiply the colors, result will always be
* darker.SCREEN - opposite multiply, uses inverse values of the
* colors.REPLACE - the pixels entirely replace the others and
* don't utilize alpha (transparency) values.REMOVE - removes pixels from B with the alpha strength of A.OVERLAY - mix of MULTIPLY and SCREEN
* . Multiplies dark values, and screens light values. (2D)HARD_LIGHT - SCREEN when greater than 50%
* gray, MULTIPLY when lower. (2D)SOFT_LIGHT - mix of DARKEST and
* LIGHTEST. Works like OVERLAY, but not as harsh. (2D)
* DODGE - lightens light tones and increases contrast,
* ignores darks. (2D)BURN - darker areas are applied, increasing contrast,
* ignores lights. (2D)SUBTRACT - remainder of A and B (3D)
* blendMode(LIGHTEST);
* strokeWeight(30);
* stroke(80, 150, 255);
* line(25, 25, 75, 75);
* stroke(255, 50, 50);
* line(75, 25, 25, 75);
*
*
* blendMode(MULTIPLY);
* strokeWeight(30);
* stroke(80, 150, 255);
* line(25, 25, 75, 75);
* stroke(255, 50, 50);
* line(75, 25, 25, 75);
*
*
* function setup() {
* drawingContext.shadowOffsetX = 5;
* drawingContext.shadowOffsetY = -5;
* drawingContext.shadowBlur = 10;
* drawingContext.shadowColor = 'black';
* background(200);
* ellipse(width / 2, height / 2, 50, 50);
* }
*
*
* arc(50, 55, 50, 50, 0, HALF_PI);
* noFill();
* arc(50, 55, 60, 60, HALF_PI, PI);
* arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
* arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
* describe(
* 'A shattered outline of an ellipse with a quarter of a white circle at the bottom-right.'
* );
*
*
* arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
* describe('A white ellipse with the top-right third missing. The bottom is outlined in black.');
*
*
* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
* describe(
* 'A white ellipse missing a section from the top-right. The bottom is outlined in black.'
* );
*
*
* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
* describe('A white ellipse with a black outline missing a section from the top-right.');
*
*
* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
* describe('A white ellipse with a black outline. The top-right third is missing.');
*
*
* ellipse(56, 46, 55, 55);
* describe('A white ellipse with black outline in middle of a gray canvas.');
*
*
* circle(30, 30, 20);
* describe('A white circle with black outline in the middle of a gray canvas.');
*
*
* line(30, 20, 85, 75);
* describe(
* 'A black line on a gray canvas running from top-center to bottom-right.'
* );
*
*
* line(30, 20, 85, 20);
* stroke(126);
* line(85, 20, 85, 75);
* stroke(255);
* line(85, 75, 30, 75);
* describe(
* 'Three lines drawn in grayscale on a gray canvas. They form the top, right, and bottom sides of a square.'
* );
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('A black line drawn on a gray canvas.');
* }
*
* function draw() {
* background(220);
* line(0, 0, 0, 10, 10, 0);
* }
*
*
* point(30, 20);
* point(85, 20);
* point(85, 75);
* point(30, 75);
* describe(
* 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
* );
*
*
* point(30, 20);
* point(85, 20);
* stroke('purple');
* strokeWeight(10);
* point(85, 75);
* point(30, 75);
* describe(
* 'Four points drawn on a gray canvas. Two are black and two are purple. The points form the corners of a square.'
* );
*
*
* let a = createVector(10, 10);
* point(a);
* let b = createVector(10, 20);
* point(b);
* let c = createVector(20, 10);
* point(c);
* let d = createVector(20, 20);
* point(d);
* describe(
* 'Four small, black points drawn on a gray canvas. The points form the corners of a square.'
* );
*
*
* quad(20, 20, 80, 20, 80, 80, 20, 80);
* describe('A white square with a black outline drawn on a gray canvas.');
*
*
* quad(20, 30, 80, 30, 80, 70, 20, 70);
* describe('A white rectangle with a black outline drawn on a gray canvas.');
*
*
* quad(50, 62, 86, 50, 50, 38, 14, 50);
* describe('A white rhombus with a black outline drawn on a gray canvas.');
*
*
* quad(20, 50, 80, 30, 80, 70, 20, 70);
* describe('A white trapezoid with a black outline drawn on a gray canvas.');
*
*
* rect(30, 20, 55, 55);
* describe('A white rectangle with a black outline on a gray canvas.');
*
*
* rect(30, 20, 55, 55, 20);
* describe(
* 'A white rectangle with a black outline and round edges on a gray canvas.'
* );
*
*
* rect(30, 20, 55, 55, 20, 15, 10, 5);
* describe('A white rectangle with a black outline and round edges of different radii.');
*
*
* square(30, 20, 55);
* describe('A white square with a black outline in on a gray canvas.');
*
*
* square(30, 20, 55, 20);
* describe(
* 'A white square with a black outline and round edges on a gray canvas.'
* );
*
*
* square(30, 20, 55, 20, 15, 10, 5);
* describe('A white square with a black outline and round edges of different radii.');
*
*
* triangle(30, 75, 58, 20, 86, 75);
* describe('A white triangle with a black outline on a gray canvas.');
*
*
* ellipseMode(RADIUS);
* fill(255);
* ellipse(50, 50, 30, 30);
* ellipseMode(CENTER);
* fill(100);
* ellipse(50, 50, 30, 30);
* describe('A white circle with a gray circle at its center. Both circles have black outlines.');
*
*
* ellipseMode(CORNER);
* fill(255);
* ellipse(25, 25, 50, 50);
* ellipseMode(CORNERS);
* fill(100);
* ellipse(25, 25, 50, 50);
* describe('A white circle with a gray circle at its top-left corner. Both circles have black outlines.');
*
*
* background(0);
* noStroke();
* smooth();
* ellipse(30, 48, 36, 36);
* noSmooth();
* ellipse(70, 48, 36, 36);
* describe('Two pixelated white circles on a black background.');
*
*
* rectMode(CORNER);
* fill(255);
* rect(25, 25, 50, 50);
*
* rectMode(CORNERS);
* fill(100);
* rect(25, 25, 50, 50);
*
* describe('A small gray square drawn at the top-left corner of a white square.');
*
*
* rectMode(RADIUS);
* fill(255);
* rect(50, 50, 30, 30);
*
* rectMode(CENTER);
* fill(100);
* rect(50, 50, 30, 30);
*
* describe('A small gray square drawn at the center of a white square.');
*
*
* background(0);
* noStroke();
* smooth();
* ellipse(30, 48, 36, 36);
* noSmooth();
* ellipse(70, 48, 36, 36);
* describe('Two pixelated white circles on a black background.');
*
*
* strokeWeight(12.0);
* strokeCap(ROUND);
* line(20, 30, 80, 30);
* strokeCap(SQUARE);
* line(20, 50, 80, 50);
* strokeCap(PROJECT);
* line(20, 70, 80, 70);
* describe('Three horizontal lines. The top line has rounded ends, the middle line has squared ends, and the bottom line has longer, squared ends.');
*
*
* noFill();
* strokeWeight(10.0);
* strokeJoin(MITER);
* beginShape();
* vertex(35, 20);
* vertex(65, 50);
* vertex(35, 80);
* endShape();
* describe('A right-facing arrowhead shape with a pointed tip in center of canvas.');
*
*
* noFill();
* strokeWeight(10.0);
* strokeJoin(BEVEL);
* beginShape();
* vertex(35, 20);
* vertex(65, 50);
* vertex(35, 80);
* endShape();
* describe('A right-facing arrowhead shape with a flat tip in center of canvas.');
*
*
* noFill();
* strokeWeight(10.0);
* strokeJoin(ROUND);
* beginShape();
* vertex(35, 20);
* vertex(65, 50);
* vertex(35, 80);
* endShape();
* describe('A right-facing arrowhead shape with a rounded tip in center of canvas.');
*
*
* // Default.
* line(20, 20, 80, 20);
* // Thicker.
* strokeWeight(4);
* line(20, 40, 80, 40);
* // Beastly.
* strokeWeight(10);
* line(20, 70, 80, 70);
* describe('Three horizontal black lines. The top line is thin, the middle is medium, and the bottom is thick.');
*
*
* // Default.
* line(20, 20, 80, 20);
* // Adding scale transformation.
* scale(5);
* // Coordinates adjusted for scaling.
* line(4, 8, 16, 8);
* describe('Two horizontal black lines. The top line is thin and the bottom is five times thicker than the top.');
*
*
* noFill();
* stroke(255, 102, 0);
* line(85, 20, 10, 10);
* line(90, 90, 15, 80);
* stroke(0, 0, 0);
* bezier(85, 20, 10, 10, 90, 90, 15, 80);
*
*
* background(0, 0, 0);
* noFill();
* stroke(255);
* bezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* noFill();
* bezierDetail(5);
* }
*
* function draw() {
* background(200);
* bezier(
* -40, -40, 0,
* 90, -40, 0,
* -90, 40, 0,
* 40, 40, 0
* );
* }
*
*
* noFill();
* let x1 = 85,
x2 = 10,
x3 = 90,
x4 = 15;
* let y1 = 20,
y2 = 10,
y3 = 90,
y4 = 80;
* bezier(x1, y1, x2, y2, x3, y3, x4, y4);
* fill(255);
* let steps = 10;
* for (let i = 0; i <= steps; i++) {
* let t = i / steps;
* let x = bezierPoint(x1, x2, x3, x4, t);
* let y = bezierPoint(y1, y2, y3, y4, t);
* circle(x, y, 5);
* }
*
*
* noFill();
* bezier(85, 20, 10, 10, 90, 90, 15, 80);
* let steps = 6;
* fill(255);
* for (let i = 0; i <= steps; i++) {
* let t = i / steps;
* // Get the location of the point
* let x = bezierPoint(85, 10, 90, 15, t);
* let y = bezierPoint(20, 10, 90, 80, t);
* // Get the tangent points
* let tx = bezierTangent(85, 10, 90, 15, t);
* let ty = bezierTangent(20, 10, 90, 80, t);
* // Calculate an angle from the tangent points
* let a = atan2(ty, tx);
* a += PI;
* stroke(255, 102, 0);
* line(x, y, cos(a) * 30 + x, sin(a) * 30 + y);
* // The following line of code makes a line
* // inverse of the above line
* //line(x, y, cos(a)*-30 + x, sin(a)*-30 + y);
* stroke(0);
* ellipse(x, y, 5, 5);
* }
*
*
* noFill();
* bezier(85, 20, 10, 10, 90, 90, 15, 80);
* stroke(255, 102, 0);
* let steps = 16;
* for (let i = 0; i <= steps; i++) {
* let t = i / steps;
* let x = bezierPoint(85, 10, 90, 15, t);
* let y = bezierPoint(20, 10, 90, 80, t);
* let tx = bezierTangent(85, 10, 90, 15, t);
* let ty = bezierTangent(20, 10, 90, 80, t);
* let a = atan2(ty, tx);
* a -= HALF_PI;
* line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);
* }
*
*
* noFill();
* stroke(255, 102, 0);
* curve(5, 26, 5, 26, 73, 24, 73, 61);
* stroke(0);
* curve(5, 26, 73, 24, 73, 61, 15, 65);
* stroke(255, 102, 0);
* curve(73, 24, 73, 61, 15, 65, 15, 65);
*
*
* // Define the curve points as JavaScript objects
* let p1 = { x: 5, y: 26 };
* let p2 = { x: 73, y: 24 };
* let p3 = { x: 73, y: 61 };
* let p4 = { x: 15, y: 65 };
* noFill();
* stroke(255, 102, 0);
* curve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
* stroke(0);
* curve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
* stroke(255, 102, 0);
* curve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y);
*
*
* noFill();
* stroke(255, 102, 0);
* curve(5, 26, 0, 5, 26, 0, 73, 24, 0, 73, 61, 0);
* stroke(0);
* curve(5, 26, 0, 73, 24, 0, 73, 61, 0, 15, 65, 0);
* stroke(255, 102, 0);
* curve(73, 24, 0, 73, 61, 0, 15, 65, 0, 15, 65, 0);
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
*
* curveDetail(5);
* }
* function draw() {
* background(200);
*
* curve(250, 600, 0, -30, 40, 0, 30, 30, 0, -250, 600, 0);
* }
*
*
* // Move the mouse left and right to see the curve change
* function setup() {
* createCanvas(100, 100);
* noFill();
* }
*
* function draw() {
* background(204);
* let t = map(mouseX, 0, width, -5, 5);
* curveTightness(t);
* beginShape();
* curveVertex(10, 26);
* curveVertex(10, 26);
* curveVertex(83, 24);
* curveVertex(83, 61);
* curveVertex(25, 65);
* curveVertex(25, 65);
* endShape();
* }
*
*
* noFill();
* curve(5, 26, 5, 26, 73, 24, 73, 61);
* curve(5, 26, 73, 24, 73, 61, 15, 65);
* fill(255);
* ellipseMode(CENTER);
* let steps = 6;
* for (let i = 0; i <= steps; i++) {
* let t = i / steps;
* let x = curvePoint(5, 5, 73, 73, t);
* let y = curvePoint(26, 26, 24, 61, t);
* ellipse(x, y, 5, 5);
* x = curvePoint(5, 73, 73, 15, t);
* y = curvePoint(26, 24, 61, 65, t);
* ellipse(x, y, 5, 5);
* }
*
*
* noFill();
* curve(5, 26, 73, 24, 73, 61, 15, 65);
* let steps = 6;
* for (let i = 0; i <= steps; i++) {
* let t = i / steps;
* let x = curvePoint(5, 73, 73, 15, t);
* let y = curvePoint(26, 24, 61, 65, t);
* //ellipse(x, y, 5, 5);
* let tx = curveTangent(5, 73, 73, 15, t);
* let ty = curveTangent(26, 24, 61, 65, t);
* let a = atan2(ty, tx);
* a -= PI / 2.0;
* line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);
* }
*
*
* translate(50, 50);
* stroke(255, 0, 0);
* beginShape();
* // Exterior part of shape, clockwise winding
* vertex(-40, -40);
* vertex(40, -40);
* vertex(40, 40);
* vertex(-40, 40);
* // Interior part of shape, counter-clockwise winding
* beginContour();
* vertex(-20, -20);
* vertex(-20, 20);
* vertex(20, 20);
* vertex(20, -20);
* endContour();
* endShape(CLOSE);
*
*
* beginShape();
* vertex(30, 20);
* vertex(85, 20);
* vertex(85, 75);
* vertex(30, 75);
* endShape(CLOSE);
*
*
* beginShape(POINTS);
* vertex(30, 20);
* vertex(85, 20);
* vertex(85, 75);
* vertex(30, 75);
* endShape();
*
*
* beginShape(LINES);
* vertex(30, 20);
* vertex(85, 20);
* vertex(85, 75);
* vertex(30, 75);
* endShape();
*
*
* noFill();
* beginShape();
* vertex(30, 20);
* vertex(85, 20);
* vertex(85, 75);
* vertex(30, 75);
* endShape();
*
*
* noFill();
* beginShape();
* vertex(30, 20);
* vertex(85, 20);
* vertex(85, 75);
* vertex(30, 75);
* endShape(CLOSE);
*
*
* beginShape(TRIANGLES);
* vertex(30, 75);
* vertex(40, 20);
* vertex(50, 75);
* vertex(60, 20);
* vertex(70, 75);
* vertex(80, 20);
* endShape();
*
*
* beginShape(TRIANGLE_STRIP);
* vertex(30, 75);
* vertex(40, 20);
* vertex(50, 75);
* vertex(60, 20);
* vertex(70, 75);
* vertex(80, 20);
* vertex(90, 75);
* endShape();
*
*
* beginShape(TRIANGLE_FAN);
* vertex(57.5, 50);
* vertex(57.5, 15);
* vertex(92, 50);
* vertex(57.5, 85);
* vertex(22, 50);
* vertex(57.5, 15);
* endShape();
*
*
* beginShape(QUADS);
* vertex(30, 20);
* vertex(30, 75);
* vertex(50, 75);
* vertex(50, 20);
* vertex(65, 20);
* vertex(65, 75);
* vertex(85, 75);
* vertex(85, 20);
* endShape();
*
*
* beginShape(QUAD_STRIP);
* vertex(30, 20);
* vertex(30, 75);
* vertex(50, 20);
* vertex(50, 75);
* vertex(65, 20);
* vertex(65, 75);
* vertex(85, 20);
* vertex(85, 75);
* endShape();
*
*
* beginShape(TESS);
* vertex(20, 20);
* vertex(80, 20);
* vertex(80, 40);
* vertex(40, 40);
* vertex(40, 60);
* vertex(80, 60);
* vertex(80, 80);
* vertex(20, 80);
* endShape(CLOSE);
*
*
* noFill();
* beginShape();
* vertex(30, 20);
* bezierVertex(80, 0, 80, 75, 30, 75);
* endShape();
*
*
* beginShape();
* vertex(30, 20);
* bezierVertex(80, 0, 80, 75, 30, 75);
* bezierVertex(50, 80, 60, 25, 30, 20);
* endShape();
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* setAttributes('antialias', true);
* }
* function draw() {
* orbitControl();
* background(50);
* strokeWeight(4);
* stroke(255);
* point(-25, 30);
* point(25, 30);
* point(25, -30);
* point(-25, -30);
*
* strokeWeight(1);
* noFill();
*
* beginShape();
* vertex(-25, 30);
* bezierVertex(25, 30, 25, -30, -25, -30);
* endShape();
*
* beginShape();
* vertex(-25, 30, 20);
* bezierVertex(25, 30, 20, 25, -30, 20, -25, -30, 20);
* endShape();
* }
*
*
* strokeWeight(5);
* point(84, 91);
* point(68, 19);
* point(21, 17);
* point(32, 91);
* strokeWeight(1);
*
* noFill();
* beginShape();
* curveVertex(84, 91);
* curveVertex(84, 91);
* curveVertex(68, 19);
* curveVertex(21, 17);
* curveVertex(32, 91);
* curveVertex(32, 91);
* endShape();
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* setAttributes('antialias', true);
* }
* function draw() {
* orbitControl();
* background(50);
* strokeWeight(4);
* stroke(255);
*
* point(-25, 25);
* point(-25, 25);
* point(-25, -25);
* point(25, -25);
* point(25, 25);
* point(25, 25);
*
* strokeWeight(1);
* noFill();
*
* beginShape();
* curveVertex(-25, 25);
* curveVertex(-25, 25);
* curveVertex(-25, -25);
* curveVertex(25, -25);
* curveVertex(25, 25);
* curveVertex(25, 25);
* endShape();
*
* beginShape();
* curveVertex(-25, 25, 20);
* curveVertex(-25, 25, 20);
* curveVertex(-25, -25, 20);
* curveVertex(25, -25, 20);
* curveVertex(25, 25, 20);
* curveVertex(25, 25, 20);
* endShape();
* }
*
*
* translate(50, 50);
* stroke(255, 0, 0);
* beginShape();
* // Exterior part of shape, clockwise winding
* vertex(-40, -40);
* vertex(40, -40);
* vertex(40, 40);
* vertex(-40, 40);
* // Interior part of shape, counter-clockwise winding
* beginContour();
* vertex(-20, -20);
* vertex(-20, 20);
* vertex(20, 20);
* vertex(20, -20);
* endContour();
* endShape(CLOSE);
*
*
* noFill();
*
* beginShape();
* vertex(20, 20);
* vertex(45, 20);
* vertex(45, 80);
* endShape(CLOSE);
*
* beginShape();
* vertex(50, 20);
* vertex(75, 20);
* vertex(75, 80);
* endShape();
*
*
* let fx;
* let vs = `#version 300 es
*
* precision mediump float;
*
* in vec3 aPosition;
* flat out int instanceID;
*
* uniform mat4 uModelViewMatrix;
* uniform mat4 uProjectionMatrix;
*
* void main() {
*
* // copy the instance ID to the fragment shader
* instanceID = gl_InstanceID;
* vec4 positionVec4 = vec4(aPosition, 1.0);
*
* // gl_InstanceID represents a numeric value for each instance
* // using gl_InstanceID allows us to move each instance separately
* // here we move each instance horizontally by id * 23
* float xOffset = float(gl_InstanceID) * 23.0;
*
* // apply the offset to the final position
* gl_Position = uProjectionMatrix * uModelViewMatrix * (positionVec4 -
* vec4(xOffset, 0.0, 0.0, 0.0));
* }
* `;
* let fs = `#version 300 es
*
* precision mediump float;
*
* out vec4 outColor;
* flat in int instanceID;
* uniform float numInstances;
*
* void main() {
* vec4 red = vec4(1.0, 0.0, 0.0, 1.0);
* vec4 blue = vec4(0.0, 0.0, 1.0, 1.0);
*
* // Normalize the instance id
* float normId = float(instanceID) / numInstances;
*
* // Mix between two colors using the normalized instance id
* outColor = mix(red, blue, normId);
* }
* `;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* fx = createShader(vs, fs);
* }
*
* function draw() {
* background(220);
*
* // strokes aren't instanced, and are rather used for debug purposes
* shader(fx);
* fx.setUniform('numInstances', 4);
*
* // this doesn't have to do with instancing, this is just for centering the squares
* translate(25, -10);
*
* // here we draw the squares we want to instance
* beginShape();
* vertex(0, 0);
* vertex(0, 20);
* vertex(20, 20);
* vertex(20, 0);
* vertex(0, 0);
* endShape(CLOSE, 4);
*
* resetShader();
* }
*
*
* strokeWeight(5);
* point(20, 20);
* point(80, 20);
* point(50, 50);
*
* noFill();
* strokeWeight(1);
* beginShape();
* vertex(20, 20);
* quadraticVertex(80, 20, 50, 50);
* endShape();
*
*
* strokeWeight(5);
* point(20, 20);
* point(80, 20);
* point(50, 50);
*
* point(20, 80);
* point(80, 80);
* point(80, 60);
*
* noFill();
* strokeWeight(1);
* beginShape();
* vertex(20, 20);
* quadraticVertex(80, 20, 50, 50);
* quadraticVertex(20, 80, 80, 80);
* vertex(80, 60);
* endShape();
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* setAttributes('antialias', true);
* }
* function draw() {
* orbitControl();
* background(50);
* strokeWeight(4);
* stroke(255);
*
* point(-35, -35);
* point(35, -35);
* point(0, 0);
* point(-35, 35);
* point(35, 35);
* point(35, 10);
*
* strokeWeight(1);
* noFill();
*
* beginShape();
* vertex(-35, -35);
* quadraticVertex(35, -35, 0, 0);
* quadraticVertex(-35, 35, 35, 35);
* vertex(35, 10);
* endShape();
*
* beginShape();
* vertex(-35, -35, 20);
* quadraticVertex(35, -35, 20, 0, 0, 20);
* quadraticVertex(-35, 35, 20, 35, 35, 20);
* vertex(35, 10, 20);
* endShape();
* }
*
*
* strokeWeight(3);
* beginShape(POINTS);
* vertex(30, 20);
* vertex(85, 20);
* vertex(85, 75);
* vertex(30, 75);
* endShape();
*
*
* createCanvas(100, 100, WEBGL);
* background(240, 240, 240);
* fill(237, 34, 93);
* noStroke();
* beginShape();
* vertex(0, 35);
* vertex(35, 0);
* vertex(0, -35);
* vertex(-35, 0);
* endShape();
*
*
* createCanvas(100, 100, WEBGL);
* background(240, 240, 240);
* fill(237, 34, 93);
* noStroke();
* beginShape();
* vertex(-10, 10);
* vertex(0, 35);
* vertex(10, 10);
* vertex(35, 0);
* vertex(10, -8);
* vertex(0, -35);
* vertex(-10, -8);
* vertex(-35, 0);
* endShape();
*
*
* strokeWeight(3);
* stroke(237, 34, 93);
* beginShape(LINES);
* vertex(10, 35);
* vertex(90, 35);
* vertex(10, 65);
* vertex(90, 65);
* vertex(35, 10);
* vertex(35, 90);
* vertex(65, 10);
* vertex(65, 90);
* endShape();
*
*
* // Click to change the number of sides.
* // In WebGL mode, custom shapes will only
* // display hollow fill sections when
* // all calls to vertex() use the same z-value.
*
* let sides = 3;
* let angle, px, py;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* setAttributes('antialias', true);
* fill(237, 34, 93);
* strokeWeight(3);
* }
*
* function draw() {
* background(200);
* rotateX(frameCount * 0.01);
* rotateZ(frameCount * 0.01);
* ngon(sides, 0, 0, 80);
* }
*
* function mouseClicked() {
* if (sides > 6) {
* sides = 3;
* } else {
* sides++;
* }
* }
*
* function ngon(n, x, y, d) {
* beginShape(TESS);
* for (let i = 0; i < n + 1; i++) {
* angle = TWO_PI / n * i;
* px = x + sin(angle) * d / 2;
* py = y - cos(angle) * d / 2;
* vertex(px, py, 0);
* }
* for (let i = 0; i < n + 1; i++) {
* angle = TWO_PI / n * i;
* px = x + sin(angle) * d / 4;
* py = y - cos(angle) * d / 4;
* vertex(px, py, 0);
* }
* endShape();
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* noStroke();
* }
*
* function draw() {
* background(255);
* rotateY(frameCount / 100);
* normalMaterial();
* beginShape(TRIANGLE_STRIP);
* normal(-0.4, 0.4, 0.8);
* vertex(-30, 30, 0);
*
* normal(0, 0, 1);
* vertex(-30, -30, 30);
* vertex(30, 30, 30);
*
* normal(0.4, -0.4, 0.8);
* vertex(30, -30, 0);
* endShape();
* }
*
*
* function setup() {
* createCanvas(100, 100);
* background(200);
* noLoop();
* }
* function draw() {
* line(10, 10, 90, 90);
* }
*
*
* let x = 0;
* function setup() {
* createCanvas(100, 100);
* }
*
* function draw() {
* background(204);
* x = x + 0.1;
* if (x > width) {
* x = 0;
* }
* line(x, 0, x, height);
* }
*
* function mousePressed() {
* noLoop();
* }
*
* function mouseReleased() {
* loop();
* }
*
*
* let x = 0;
* function setup() {
* createCanvas(100, 100);
* noLoop();
* }
*
* function draw() {
* background(204);
* x = x + 0.1;
* if (x > width) {
* x = 0;
* }
* line(x, 0, x, height);
* }
*
* function mousePressed() {
* loop();
* }
*
* function mouseReleased() {
* noLoop();
* }
*
*
* let checkbox, button, colBG, colFill;
*
* function setup() {
* createCanvas(100, 100);
*
* button = createButton('Colorize if loop()');
* button.position(0, 120);
* button.mousePressed(changeBG);
*
* checkbox = createCheckbox('loop()', true);
* checkbox.changed(checkLoop);
*
* colBG = color(0);
* colFill = color(255);
* }
*
* function changeBG() {
* if (isLooping()) {
* colBG = color(random(255), random(255), random(255));
* colFill = color(random(255), random(255), random(255));
* }
* }
*
* function checkLoop() {
* if (this.checked()) {
* loop();
* } else {
* noLoop();
* }
* }
*
* function draw() {
* background(colBG);
* fill(colFill);
* ellipse(frameCount % width, height / 2, 50);
* }
*
*
* ellipse(0, 50, 33, 33); // Left circle
*
* push(); // Start a new drawing state
* strokeWeight(10);
* fill(204, 153, 0);
* translate(50, 0);
* ellipse(0, 50, 33, 33); // Middle circle
* pop(); // Restore original state
*
* ellipse(100, 50, 33, 33); // Right circle
*
*
* ellipse(0, 50, 33, 33); // Left circle
*
* push(); // Start a new drawing state
* strokeWeight(10);
* fill(204, 153, 0);
* ellipse(33, 50, 33, 33); // Left-middle circle
*
* push(); // Start another new drawing state
* stroke(0, 102, 153);
* ellipse(66, 50, 33, 33); // Right-middle circle
* pop(); // Restore previous state
*
* pop(); // Restore original state
*
* ellipse(100, 50, 33, 33); // Right circle
*
*
* ellipse(0, 50, 33, 33); // Left circle
*
* push(); // Start a new drawing state
* translate(50, 0);
* strokeWeight(10);
* fill(204, 153, 0);
* ellipse(0, 50, 33, 33); // Middle circle
* pop(); // Restore original state
*
* ellipse(100, 50, 33, 33); // Right circle
*
*
* ellipse(0, 50, 33, 33); // Left circle
*
* push(); // Start a new drawing state
* strokeWeight(10);
* fill(204, 153, 0);
* ellipse(33, 50, 33, 33); // Left-middle circle
*
* push(); // Start another new drawing state
* stroke(0, 102, 153);
* ellipse(66, 50, 33, 33); // Right-middle circle
* pop(); // Restore previous state
*
* pop(); // Restore original state
*
* ellipse(100, 50, 33, 33); // Right circle
*
*
* let x = 0;
*
* function setup() {
* createCanvas(100, 100);
* noLoop();
* }
*
* function draw() {
* background(204);
* line(x, 0, x, height);
* }
*
* function mousePressed() {
* x += 1;
* redraw();
* }
*
*
* let x = 0;
*
* function setup() {
* createCanvas(100, 100);
* noLoop();
* }
*
* function draw() {
* background(204);
* x += 1;
* line(x, 0, x, height);
* }
*
* function mousePressed() {
* redraw(5);
* }
*
*
* const s = p => {
* let x = 100;
* let y = 100;
*
* p.setup = function() {
* p.createCanvas(700, 410);
* };
*
* p.draw = function() {
* p.background(0);
* p.fill(255);
* p.rect(x, y, 50, 50);
* };
* };
*
* new p5(s); // invoke p5
*
*
*
*
* @method applyMatrix
* @param {Array} arr an array of numbers - should be 6 or 16 length (2×3 or 4×4 matrix values)
* @chainable
* @example
*
* function setup() {
* frameRate(10);
* rectMode(CENTER);
* }
*
* function draw() {
* let step = frameCount % 20;
* background(200);
* // Equivalent to translate(x, y);
* applyMatrix(1, 0, 0, 1, 40 + step, 50);
* rect(0, 0, 50, 50);
* }
*
*
* function setup() {
* frameRate(10);
* rectMode(CENTER);
* }
*
* function draw() {
* let step = frameCount % 20;
* background(200);
* translate(50, 50);
* // Equivalent to scale(x, y);
* applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);
* rect(0, 0, 50, 50);
* }
*
*
* function setup() {
* frameRate(10);
* rectMode(CENTER);
* }
*
* function draw() {
* let step = frameCount % 20;
* let angle = map(step, 0, 20, 0, TWO_PI);
* let cos_a = cos(angle);
* let sin_a = sin(angle);
* background(200);
* translate(50, 50);
* // Equivalent to rotate(angle);
* applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
* rect(0, 0, 50, 50);
* }
*
*
* function setup() {
* frameRate(10);
* rectMode(CENTER);
* }
*
* function draw() {
* let step = frameCount % 20;
* let angle = map(step, 0, 20, -PI / 4, PI / 4);
* background(200);
* translate(50, 50);
* // equivalent to shearX(angle);
* let shear_factor = 1 / tan(PI / 2 - angle);
* applyMatrix(1, 0, shear_factor, 1, 0, 0);
* rect(0, 0, 50, 50);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* noFill();
* }
*
* function draw() {
* background(200);
* rotateY(PI / 6);
* stroke(153);
* box(35);
* let rad = millis() / 1000;
* // Set rotation angles
* let ct = cos(rad);
* let st = sin(rad);
* // Matrix for rotation around the Y axis
* applyMatrix(
* ct, 0.0, st, 0.0,
* 0.0, 1.0, 0.0, 0.0,
* -st, 0.0, ct, 0.0,
* 0.0, 0.0, 0.0, 1.0
* );
* stroke(255);
* box(50);
* }
*
*
* function draw() {
* background(200);
* let testMatrix = [1, 0, 0, 1, 0, 0];
* applyMatrix(testMatrix);
* rect(0, 0, 50, 50);
* }
*
*
* translate(50, 50);
* applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
* rect(0, 0, 20, 20);
* // Note that the translate is also reset.
* resetMatrix();
* rect(0, 0, 20, 20);
*
*
* translate(width / 2, height / 2);
* rotate(PI / 3.0);
* rect(-26, -26, 52, 52);
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* }
* function draw() {
* background(255);
* rotateX(millis() / 1000);
* box();
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* }
* function draw() {
* background(255);
* rotateY(millis() / 1000);
* box();
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* }
* function draw() {
* background(255);
* rotateZ(millis() / 1000);
* box();
* }
*
*
* rect(30, 20, 50, 50);
* scale(0.5);
* rect(30, 20, 50, 50);
*
*
* rect(30, 20, 50, 50);
* scale(0.5, 1.3);
* rect(30, 20, 50, 50);
*
*
* translate(width / 4, height / 4);
* shearX(PI / 4.0);
* rect(0, 0, 30, 30);
*
*
* translate(width / 4, height / 4);
* shearY(PI / 4.0);
* rect(0, 0, 30, 30);
*
*
* translate(30, 20);
* rect(0, 0, 55, 55);
*
*
* rect(0, 0, 55, 55); // Draw rect at original 0,0
* translate(30, 20);
* rect(0, 0, 55, 55); // Draw rect at new 0,0
* translate(14, 14);
* rect(0, 0, 55, 55); // Draw rect at new 0,0
*
*
* function draw() {
* background(200);
* rectMode(CENTER);
* translate(width / 2, height / 2);
* translate(p5.Vector.fromAngle(millis() / 1000, 40));
* rect(0, 0, 20, 20);
* }
*
*
* // Type to change the letter in the
* // center of the canvas.
* // If you reload the page, it will
* // still display the last key you entered
*
* let myText;
*
* function setup() {
* createCanvas(100, 100);
* myText = getItem('myText');
* if (myText === null) {
* myText = '';
* }
* describe(`When you type the key name is displayed as black text on white background.
* If you reload the page, the last letter typed is still displaying.`);
* }
*
* function draw() {
* textSize(40);
* background(255);
* text(myText, width / 2, height / 2);
* }
*
* function keyPressed() {
* myText = key;
* storeItem('myText', myText);
* }
*
* // Click the mouse to change
* // the color of the background
* // Once you have changed the color
* // it will stay changed even when you
* // reload the page.
*
* let myColor;
*
* function setup() {
* createCanvas(100, 100);
* myColor = getItem('myColor');
* }
*
* function draw() {
* if (myColor !== null) {
* background(myColor);
* }
* describe(`If you click, the canvas changes to a random color.·
* If you reload the page, the canvas is still the color it was when the
* page was previously loaded.`);
* }
*
* function mousePressed() {
* myColor = color(random(255), random(255), random(255));
* storeItem('myColor', myColor);
* }
*
* function setup() {
* let myNum = 10;
* let myBool = false;
* storeItem('myNum', myNum);
* storeItem('myBool', myBool);
* print(getItem('myNum')); // logs 10 to the console
* print(getItem('myBool')); // logs false to the console
* clearStorage();
* print(getItem('myNum')); // logs null to the console
* print(getItem('myBool')); // logs null to the console
* }
*
* function setup() {
* let myVar = 10;
* storeItem('myVar', myVar);
* print(getItem('myVar')); // logs 10 to the console
* removeItem('myVar');
* print(getItem('myVar')); // logs null to the console
* }
*
* function setup() {
* let myDictionary = createStringDict('p5', 'js');
* print(myDictionary.hasKey('p5')); // logs true to console
*
* let anotherDictionary = createStringDict({ happy: 'coding' });
* print(anotherDictionary.hasKey('happy')); // logs true to console
* }
*
* function setup() {
* let myDictionary = createNumberDict(100, 42);
* print(myDictionary.hasKey(100)); // logs true to console
*
* let anotherDictionary = createNumberDict({ 200: 84 });
* print(anotherDictionary.hasKey(200)); // logs true to console
* }
*
* function setup() {
* let myDictionary = createNumberDict(1, 10);
* myDictionary.create(2, 20);
* myDictionary.create(3, 30);
* print(myDictionary.size()); // logs 3 to the console
* }
*
* function setup() {
* let myDictionary = createStringDict('p5', 'js');
* print(myDictionary.hasKey('p5')); // logs true to console
* }
*
* function setup() {
* let myDictionary = createStringDict('p5', 'js');
* let myValue = myDictionary.get('p5');
* print(myValue === 'js'); // logs true to console
* }
*
* function setup() {
* let myDictionary = createStringDict('p5', 'js');
* myDictionary.set('p5', 'JS');
* myDictionary.print(); // logs "key: p5 - value: JS" to console
* }
*
* function setup() {
* let myDictionary = createStringDict('p5', 'js');
* myDictionary.create('happy', 'coding');
* myDictionary.print();
* // above logs "key: p5 - value: js, key: happy - value: coding" to console
* }
*
* function setup() {
* let myDictionary = createStringDict('p5', 'js');
* print(myDictionary.hasKey('p5')); // prints 'true'
* myDictionary.clear();
* print(myDictionary.hasKey('p5')); // prints 'false'
* }
*
*
* function setup() {
* let myDictionary = createStringDict('p5', 'js');
* myDictionary.create('happy', 'coding');
* myDictionary.print();
* // above logs "key: p5 - value: js, key: happy - value: coding" to console
* myDictionary.remove('p5');
* myDictionary.print();
* // above logs "key: happy value: coding" to console
* }
*
* function setup() {
* let myDictionary = createStringDict('p5', 'js');
* myDictionary.create('happy', 'coding');
* myDictionary.print();
* // above logs "key: p5 - value: js, key: happy - value: coding" to console
* }
*
*
* function setup() {
* createCanvas(100, 100);
* background(200);
* text('click here to save', 10, 10, 70, 80);
* }
*
* function mousePressed() {
* if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
* createStringDict({
* john: 1940,
* paul: 1942,
* george: 1943,
* ringo: 1940
* }).saveTable('beatles');
* }
* }
*
*
* function setup() {
* createCanvas(100, 100);
* background(200);
* text('click here to save', 10, 10, 70, 80);
* }
*
* function mousePressed() {
* if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
* createStringDict({
* john: 1940,
* paul: 1942,
* george: 1943,
* ringo: 1940
* }).saveJSON('beatles');
* }
* }
*
*
* function setup() {
* let myDictionary = createNumberDict(2, 5);
* myDictionary.add(2, 2);
* print(myDictionary.get(2)); // logs 7 to console.
* }
*
* function setup() {
* let myDictionary = createNumberDict(2, 5);
* myDictionary.sub(2, 2);
* print(myDictionary.get(2)); // logs 3 to console.
* }
*
* function setup() {
* let myDictionary = createNumberDict(2, 4);
* myDictionary.mult(2, 2);
* print(myDictionary.get(2)); // logs 8 to console.
* }
*
* function setup() {
* let myDictionary = createNumberDict(2, 8);
* myDictionary.div(2, 2);
* print(myDictionary.get(2)); // logs 4 to console.
* }
*
* function setup() {
* let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
* let lowestValue = myDictionary.minValue(); // value is -10
* print(lowestValue);
* }
*
* function setup() {
* let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });
* let highestValue = myDictionary.maxValue(); // value is 3
* print(highestValue);
* }
*
* function setup() {
* let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
* let lowestKey = myDictionary.minKey(); // value is 1.2
* print(lowestKey);
* }
*
* function setup() {
* let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });
* let highestKey = myDictionary.maxKey(); // value is 4
* print(highestKey);
* }
*
* function setup() {
* createCanvas(100, 100);
* background(200);
*
* // Select the canvas by its tag.
* let cnv = select('canvas');
* cnv.style('border', '5px deeppink dashed');
*
* describe('A gray square with a dashed pink border.');
* }
*
*
* function setup() {
* let cnv = createCanvas(100, 100);
* // Add a class attribute to the canvas.
* cnv.class('pinkborder');
*
* background(200);
*
* // Select the canvas by its class.
* cnv = select('.pinkborder');
* // Style its border.
* cnv.style('border', '5px deeppink dashed');
*
* describe('A gray square with a dashed pink border.');
* }
*
*
* function setup() {
* let cnv = createCanvas(100, 100);
* // Set the canvas ID.
* cnv.id('mycanvas');
*
* background(200);
*
* // Select the canvas by its ID.
* cnv = select('#mycanvas');
* // Style its border.
* cnv.style('border', '5px deeppink dashed');
*
* describe('A gray square with a dashed pink border.');
* }
*
*
* function setup() {
* // Create three buttons.
* createButton('1');
* createButton('2');
* createButton('3');
*
* // Select the buttons by their tag.
* let buttons = selectAll('button');
*
* // Position the buttons.
* for (let i = 0; i < 3; i += 1) {
* buttons[i].position(0, i * 30);
* }
*
* describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3".');
* }
*
*
* function setup() {
* // Create three buttons and position them.
* let b1 = createButton('1');
* b1.position(0, 0);
* let b2 = createButton('2');
* b2.position(0, 30);
* let b3 = createButton('3');
* b3.position(0, 60);
*
* // Add a class attribute to each button.
* b1.class('btn');
* b2.class('btn btn-pink');
* b3.class('btn');
*
* // Select the buttons by their class.
* let buttons = selectAll('.btn');
* let pinkButtons = selectAll('.btn-pink');
*
* // Style the selected buttons.
* buttons.forEach(btn => {
* btn.style('font-family', 'Comic Sans MS');
* });
*
* pinkButtons.forEach(btn => {
* btn.style('background', 'deeppink');
* btn.style('color', 'white');
* });
*
* describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3". Buttons "1" and "3" are gray. Button "2" is pink.');
* }
*
*
* function setup() {
* createCanvas(100, 100);
* background(200);
*
* // Create a paragraph element and place
* // it in the middle of the canvas.
* let p = createP('p5*js');
* p.position(25, 25);
*
* describe('A gray square with the text "p5*js" written in its center. The text disappears when the mouse is pressed.');
* }
*
* function mousePressed() {
* removeElements();
* }
*
*
* let slider;
*
* function setup() {
* createCanvas(100, 100);
*
* // Create a paragraph element and place
* // it at the top of the canvas.
* let p = createP('p5*js');
* p.position(25, 25);
*
* // Create a slider element and place it
* // beneath the canvas.
* slider = createSlider(0, 255, 200);
* slider.position(0, 100);
*
* describe('A gray square with the text "p5*js" written in its center and a range slider beneath it. The square changes color when the slider is moved. The text and slider disappear when the square is double-clicked.');
* }
*
* function draw() {
* // Use the slider value to change the background color.
* let g = slider.value();
* background(g);
* }
*
* function doubleClicked() {
* removeElements();
* }
*
*
* function setup() {
* background(200);
*
* // Create a dropdown menu and add a few color options.
* let drop = createSelect();
* drop.position(0, 0);
* drop.option('red');
* drop.option('green');
* drop.option('blue');
*
* // When the color option changes, paint the background with
* // that color.
* drop.changed(() => {
* let c = drop.value();
* background(c);
* });
*
* describe('A gray square with a dropdown menu at the top. The square changes color when an option is selected.');
* }
*
*
* function setup() {
* background(200);
*
* // Create a checkbox and place it beneath the canvas.
* let checkbox = createCheckbox(' circle');
* checkbox.position(0, 100);
*
* // When the checkbox changes, paint the background gray
* // and determine whether to draw a circle.
* checkbox.changed(() => {
* background(200);
* if (checkbox.checked() === true) {
* circle(50, 50, 30);
* }
* });
*
* describe('A gray square with a checkbox underneath it that says "circle". A white circle appears when the box is checked and disappears otherwise.');
* }
*
*
* function setup() {
* background(200);
*
* // Create a slider and place it beneath the canvas.
* let slider = createSlider(0, 255, 200);
* slider.position(0, 100);
*
* // When the slider changes, use its value to paint
* // the background.
* slider.input(() => {
* let g = slider.value();
* background(g);
* });
*
* describe('A gray square with a range slider underneath it. The background changes shades of gray when the slider is moved.');
* }
*
*
* function setup() {
* background(200);
*
* // Create an input and place it beneath the canvas.
* let inp = createInput('');
* inp.position(0, 100);
*
* // When input is detected, paint the background gray
* // and display the text.
* inp.input(() => {
* background(200);
* let msg = inp.value();
* text(msg, 5, 50);
* });
*
* describe('A gray square with a text input bar beneath it. Any text written in the input appears in the middle of the square.');
* }
*
*
* function setup() {
* background(200);
*
* let div = createDiv('p5*js');
* div.position(25, 35);
*
* describe('A gray square with the text "p5*js" written in its center.');
* }
*
*
* function setup() {
* background(200);
*
* // Create an h3 element within the div.
* let div = createDiv('p5*js
');
* div.position(20, 5);
*
* describe('A gray square with the text "p5*js" written in its center.');
* }
*
*
* function setup() {
* background(200);
*
* let p = createP('Tell me a story.');
* p.position(5, 0);
*
* describe('A gray square displaying the text "Tell me a story." written in black.');
* }
*
*
* function setup() {
* background(200);
*
* // Create a span element.
* let span = createSpan('p5*js');
* span.position(25, 35);
*
* describe('A gray square with the text "p5*js" written in its center.');
* }
*
*
* function setup() {
* background(200);
*
* // Create a div element as
* // a container.
* let div = createDiv();
* // Place the div at the
* // center.
* div.position(25, 35);
*
* // Create a span element.
* let s1 = createSpan('p5');
* // Create a second span element.
* let s2 = createSpan('*');
* // Set the span's font color.
* s2.style('color', 'deeppink');
* // Create a third span element.
* let s3 = createSpan('js');
*
* // Add all the spans to the
* // container div.
* s1.parent(div);
* s2.parent(div);
* s3.parent(div);
*
* describe('A gray square with the text "p5*js" written in black at its center. The asterisk is pink.');
* }
*
*
* function setup() {
* background(200);
*
* let img = createImg(
* 'https://p5js.org/assets/img/asterisk-01.png',
* 'The p5.js magenta asterisk.'
* );
* img.position(0, -10);
*
* describe('A gray square with a magenta asterisk in its center.');
* }
*
*
* function setup() {
* background(200);
*
* // Create an anchor element that links to p5js.org.
* let a = createA('http://p5js.org/', 'p5*js');
* a.position(25, 35);
*
* describe('The text "p5*js" written at the center of a gray square.');
* }
*
*
* function setup() {
* background(200);
*
* // Create an anchor element that links to p5js.org.
* // Open the link in a new tab.
* let a = createA('http://p5js.org/', 'p5*js', '_blank');
* a.position(25, 35);
*
* describe('The text "p5*js" written at the center of a gray square.');
* }
*
*
* let slider;
*
* function setup() {
* // Create a slider and place it at the top of the canvas.
* slider = createSlider(0, 255);
* slider.position(10, 10);
* slider.size(80);
*
* describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.');
* }
*
* function draw() {
* // Use the slider as a grayscale value.
* let g = slider.value();
* background(g);
* }
*
*
* let slider;
*
* function setup() {
* // Create a slider and place it at the top of the canvas.
* // Set its default value to 0.
* slider = createSlider(0, 255, 0);
* slider.position(10, 10);
* slider.size(80);
*
* describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
* }
*
* function draw() {
* // Use the slider as a grayscale value.
* let g = slider.value();
* background(g);
* }
*
*
* let slider;
*
* function setup() {
* // Create a slider and place it at the top of the canvas.
* // Set its default value to 0.
* // Set its step size to 50.
* slider = createSlider(0, 255, 0, 50);
* slider.position(10, 10);
* slider.size(80);
*
* describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
* }
*
* function draw() {
* // Use the slider as a grayscale value.
* let g = slider.value();
* background(g);
* }
*
*
* let slider;
*
* function setup() {
* // Create a slider and place it at the top of the canvas.
* // Set its default value to 0.
* // Set its step size to 0 so that it moves smoothly.
* slider = createSlider(0, 255, 0, 0);
* slider.position(10, 10);
* slider.size(80);
*
* describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
* }
*
* function draw() {
* // Use the slider as a grayscale value.
* let g = slider.value();
* background(g);
* }
*
*
* function setup() {
* background(200);
*
* // Create a button and place it beneath the canvas.
* let button = createButton('click me');
* button.position(0, 100);
*
* // Use the button to change the background color.
* button.mousePressed(() => {
* let g = random(255);
* background(g);
* });
*
* describe('A gray square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
* }
*
*
* let button;
*
* function setup() {
* // Create a button and set its value to 0.
* // Place the button beneath the canvas.
* button = createButton('click me', 'red');
* button.position(0, 100);
*
* // Change the button's value when the mouse
* // is pressed.
* button.mousePressed(() => {
* let c = random(['red', 'green', 'blue', 'yellow']);
* button.value(c);
* });
*
* describe('A red square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
* }
*
* function draw() {
* // Use the button's value to set the background color.
* let c = button.value();
* background(c);
* }
*
*
* let checkbox;
*
* function setup() {
* // Create a checkbox and place it beneath the canvas.
* checkbox = createCheckbox();
* checkbox.position(0, 100);
*
* describe('A black square with a checkbox beneath it. The square turns white when the box is checked.');
* }
*
* function draw() {
* // Use the checkbox to set the background color.
* if (checkbox.checked()) {
* background(255);
* } else {
* background(0);
* }
* }
*
*
* let checkbox;
*
* function setup() {
* // Create a checkbox and place it beneath the canvas.
* // Label the checkbox "white".
* checkbox = createCheckbox(' white');
* checkbox.position(0, 100);
*
* describe('A black square with a checkbox labeled "white" beneath it. The square turns white when the box is checked.');
* }
*
* function draw() {
* // Use the checkbox to set the background color.
* if (checkbox.checked()) {
* background(255);
* } else {
* background(0);
* }
* }
*
*
* let checkbox;
*
* function setup() {
* // Create a checkbox and place it beneath the canvas.
* // Label the checkbox "white" and set its value to true.
* checkbox = createCheckbox(' white', true);
* checkbox.position(0, 100);
*
* describe('A white square with a checkbox labeled "white" beneath it. The square turns black when the box is unchecked.');
* }
*
* function draw() {
* // Use the checkbox to set the background color.
* if (checkbox.checked()) {
* background(255);
* } else {
* background(0);
* }
* }
*
*
* let mySelect;
*
* function setup() {
* // Create a dropdown and place it beneath the canvas.
* mySelect = createSelect();
* mySelect.position(0, 100);
*
* // Add color options.
* mySelect.option('red');
* mySelect.option('green');
* mySelect.option('blue');
* mySelect.option('yellow');
*
* // Set the selected option to "red".
* mySelect.selected('red');
*
* describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
* }
*
* function draw() {
* // Use the selected value to paint the background.
* let c = mySelect.selected();
* background(c);
* }
*
*
* let mySelect;
*
* function setup() {
* // Create a dropdown and place it beneath the canvas.
* mySelect = createSelect();
* mySelect.position(0, 100);
*
* // Add color options.
* mySelect.option('red');
* mySelect.option('green');
* mySelect.option('blue');
* mySelect.option('yellow');
*
* // Set the selected option to "red".
* mySelect.selected('red');
*
* // Disable the "yellow" option.
* mySelect.disable('yellow');
*
* describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
* }
*
* function draw() {
* // Use the selected value to paint the background.
* let c = mySelect.selected();
* background(c);
* }
*
*
* let mySelect;
*
* function setup() {
* // Create a dropdown and place it beneath the canvas.
* mySelect = createSelect();
* mySelect.position(0, 100);
*
* // Add color options with names and values.
* mySelect.option('one', 'red');
* mySelect.option('two', 'green');
* mySelect.option('three', 'blue');
* mySelect.option('four', 'yellow');
*
* // Set the selected option to "one".
* mySelect.selected('one');
*
* describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
* }
*
* function draw() {
* // Use the selected value to paint the background.
* let c = mySelect.selected();
* background(c);
* }
*
*
* // Hold CTRL to select multiple options on Windows and Linux.
* // Hold CMD to select multiple options on macOS.
* let mySelect;
*
* function setup() {
* // Create a dropdown and allow multiple selections.
* // Place it beneath the canvas.
* mySelect = createSelect(true);
* mySelect.position(0, 100);
*
* // Add color options.
* mySelect.option('red');
* mySelect.option('green');
* mySelect.option('blue');
* mySelect.option('yellow');
*
* describe('A gray square with a dropdown menu beneath it. Colorful circles appear when their color is selected.');
* }
*
* function draw() {
* background(200);
*
* // Use the selected value(s) to draw circles.
* let colors = mySelect.selected();
* colors.forEach((c, index) => {
* let x = 10 + index * 20;
* fill(c);
* circle(x, 50, 20);
* });
* }
*
*
* let myRadio;
*
* function setup() {
* // Create a radio button element and place it
* // in the top-left corner.
* myRadio = createRadio();
* myRadio.position(0, 0);
* myRadio.size(60);
*
* // Add a few color options.
* myRadio.option('red');
* myRadio.option('yellow');
* myRadio.option('blue');
*
* // Choose a default option.
* myRadio.selected('yellow');
*
* describe('A yellow square with three color options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option.');
* }
*
* function draw() {
* // Set the background color using the radio button.
* let g = myRadio.value();
* background(g);
* }
*
*
* let myRadio;
*
* function setup() {
* // Create a radio button element and place it
* // in the top-left corner.
* myRadio = createRadio();
* myRadio.position(0, 0);
* myRadio.size(50);
*
* // Add a few color options.
* // Color values are labeled with
* // emotions they evoke.
* myRadio.option('red', 'love');
* myRadio.option('yellow', 'joy');
* myRadio.option('blue', 'trust');
*
* // Choose a default option.
* myRadio.selected('yellow');
*
* describe('A yellow square with three options listed, "love", "joy", and "trust". The square changes color when the user selects a new option.');
* }
*
* function draw() {
* // Set the background color using the radio button.
* let c = myRadio.value();
* background(c);
* }
*
*
* let myRadio;
*
* function setup() {
* // Create a radio button element and place it
* // in the top-left corner.
* myRadio = createRadio();
* myRadio.position(0, 0);
* myRadio.size(50);
*
* // Add a few color options.
* myRadio.option('red');
* myRadio.option('yellow');
* myRadio.option('blue');
*
* // Choose a default option.
* myRadio.selected('yellow');
*
* // Create a button and place it beneath the canvas.
* let btn = createButton('disable');
* btn.position(0, 100);
*
* // Use the button to disable the radio button.
* btn.mousePressed(() => {
* myRadio.disable(true);
* });
*
* describe('A yellow square with three options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option. A "disable" button beneath the canvas disables the color options when pressed.');
* }
*
* function draw() {
* // Set the background color using the radio button.
* let c = myRadio.value();
* background(c);
* }
*
*
* let myPicker;
*
* function setup() {
* myPicker = createColorPicker('deeppink');
* myPicker.position(0, 100);
*
* describe('A pink square with a color picker beneath it. The square changes color when the user picks a new color.');
* }
*
* function draw() {
* // Use the color picker to paint the background.
* let c = myPicker.color();
* background(c);
* }
*
*
* let myPicker;
*
* function setup() {
* myPicker = createColorPicker('deeppink');
* myPicker.position(0, 100);
*
* describe('A number with the format "#rrggbb" is displayed on a pink canvas. The background color and number change when the user picks a new color.');
* }
*
* function draw() {
* // Use the color picker to paint the background.
* let c = myPicker.value();
* background(c);
*
* // Display the current color as a hex string.
* text(c, 25, 55);
* }
*
*
* let myInput;
*
* function setup() {
* // Create an input element and place it
* // beneath the canvas.
* myInput = createInput();
* myInput.position(0, 100);
*
* describe('A gray square with a text box beneath it. The text in the square changes when the user types something new in the input bar.');
* }
*
* function draw() {
* background(200);
*
* // Use the input to display a message.
* let msg = myInput.value();
* text(msg, 25, 55);
* }
*
*
* let myInput;
*
* function setup() {
* // Create an input element and place it
* // beneath the canvas. Set its default
* // text to "hello!".
* myInput = createInput('hello!');
* myInput.position(0, 100);
*
* describe('The text "hello!" written at the center of a gray square. A text box beneath the square also says "hello!". The text in the square changes when the user types something new in the input bar.');
* }
*
* function draw() {
* background(200);
*
* // Use the input to display a message.
* let msg = myInput.value();
* text(msg, 25, 55);
* }
*
*
* // Use the file input to select an image to
* // load and display.
* let input;
* let img;
*
* function setup() {
* // Create a file input and place it beneath
* // the canvas.
* input = createFileInput(handleImage);
* input.position(0, 100);
*
* describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');
* }
*
* function draw() {
* background(200);
*
* // Draw the image if loaded.
* if (img) {
* image(img, 0, 0, width, height);
* }
* }
*
* // Create an image if the file is an image.
* function handleImage(file) {
* if (file.type === 'image') {
* img = createImg(file.data, '');
* img.hide();
* } else {
* img = null;
* }
* }
*
*
* // Use the file input to select multiple images
* // to load and display.
* let input;
* let images = [];
*
* function setup() {
* // Create a file input and place it beneath
* // the canvas. Allow it to load multiple files.
* input = createFileInput(handleImage, true);
* input.position(0, 100);
* }
*
* function draw() {
* background(200);
*
* // Draw the images if loaded. Each image
* // is drawn 20 pixels lower than the
* // previous image.
* images.forEach((img, index) => {
* let y = index * 20;
* image(img, 0, y, width, height);
* });
*
* describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.');
* }
*
* // Create an image if the file is an image,
* // then add it to the images array.
* function handleImage(file) {
* if (file.type === 'image') {
* let img = createImg(file.data, '');
* img.hide();
* images.push(img);
* }
* }
*
*
* function setup() {
* noCanvas();
*
* // Load a video and add it to the page.
* // Note: this may not work in some browsers.
* let video = createVideo('assets/small.mp4');
* // Show the default video controls.
* video.showControls();
*
* describe('A video of a toy robot with playback controls beneath it.');
* }
*
*
* function setup() {
* noCanvas();
*
* // Load a video and add it to the page.
* // Provide an array options for different file formats.
* let video = createVideo(
* ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm']
* );
* // Show the default video controls.
* video.showControls();
*
* describe('A video of a toy robot with playback controls beneath it.');
* }
*
*
* let video;
*
* function setup() {
* noCanvas();
*
* // Load a video and add it to the page.
* // Provide an array options for different file formats.
* // Call mute() once the video loads.
* video = createVideo(
* ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],
* muteVideo
* );
* // Show the default video controls.
* video.showControls();
*
* describe('A video of a toy robot with playback controls beneath it.');
* }
*
* // Mute the video once it loads.
* function muteVideo() {
* video.volume(0);
* }
*
*
* function setup() {
* noCanvas();
*
* // Load the audio.
* let beat = createAudio('assets/beat.mp3');
* // Show the default audio controls.
* beat.showControls();
*
* describe('An audio beat plays when the user double-clicks the square.');
* }
*
*
* function setup() {
* noCanvas();
* createCapture(VIDEO);
*
* describe('A video stream from the webcam.');
* }
*
*
* let capture;
*
* function setup() {
* // Create the video capture and hide the element.
* capture = createCapture(VIDEO);
* capture.hide();
*
* describe('A video stream from the webcam with inverted colors.');
* }
*
* function draw() {
* // Draw the video capture within the canvas.
* image(capture, 0, 0, width, width * capture.height / capture.width);
* // Invert the colors in the stream.
* filter(INVERT);
* }
*
*
* let capture;
*
* function setup() {
* // Create the video capture with mirrored output.
* capture = createCapture(VIDEO,{ flipped:true });
* capture.size(100,100);
* describe('A video stream from the webcam with flipped or mirrored output.');
* }
*
*
*
* function setup() {
* createCanvas(480, 120);
*
* // Create a constraints object.
* let constraints = {
* video: {
* mandatory: {
* minWidth: 1280,
* minHeight: 720
* },
* optional: [{ maxFrameRate: 10 }]
* },
* audio: false
* };
*
* // Create the video capture.
* createCapture(constraints);
*
* describe('A video stream from the webcam.');
* }
*
*
* function setup() {
* background(200);
*
* // Create an h5 element with nothing in it.
* createElement('h5');
*
* describe('A gray square.');
* }
*
*
* function setup() {
* background(200);
*
* // Create an h5 element with the content
* // "p5*js".
* let h5 = createElement('h5', 'p5*js');
* // Set the element's style and position.
* h5.style('color', 'deeppink');
* h5.position(30, 15);
*
* describe('The text "p5*js" written in pink in the middle of a gray square.');
* }
*
*
* let div = createDiv('div');
* div.addClass('myClass');
*
* // In this example, a class is set when the div is created
* // and removed when mouse is pressed. This could link up
* // with a CSS style rule to toggle style properties.
*
* let div;
*
* function setup() {
* div = createDiv('div');
* div.addClass('myClass');
* }
*
* function mousePressed() {
* div.removeClass('myClass');
* }
*
* let div;
*
* function setup() {
* div = createDiv('div');
* div.addClass('show');
* }
*
* function mousePressed() {
* if (div.hasClass('show')) {
* div.addClass('show');
* } else {
* div.removeClass('show');
* }
* }
*
* let div;
*
* function setup() {
* div = createDiv('div');
* div.addClass('show');
* }
*
* function mousePressed() {
* div.toggleClass('show');
* }
*
* let div0 = createDiv('this is the parent');
* let div1 = createDiv('this is the child');
* div0.child(div1); // use p5.Element
*
* let div0 = createDiv('this is the parent');
* let div1 = createDiv('this is the child');
* div1.id('apples');
* div0.child('apples'); // use id
*
* // this example assumes there is a div already on the page
* // with id "myChildDiv"
* let div0 = createDiv('this is the parent');
* let elt = document.getElementById('myChildDiv');
* div0.child(elt); // use element from page
*
* function setup() {
* let div = createDiv('').size(10, 10);
* div.style('background-color', 'orange');
* div.center();
* }
*
* let div = createDiv('').size(100, 100);
* div.html('hi');
*
* let div = createDiv('Hello ').size(100, 100);
* div.html('World', true);
*
* function setup() {
* let cnv = createCanvas(100, 100);
* // positions canvas 50px to the right and 100px
* // below upper left corner of the window
* cnv.position(50, 100);
* }
*
* function setup() {
* let cnv = createCanvas(100, 100);
* // positions canvas at upper left corner of the window
* // with a 'fixed' position type
* cnv.position(0, 0, 'fixed');
* }
*
* function setup() {
* background(200);
*
* // Create a paragraph element and
* // set its font color to "deeppink".
* let p = createP('p5*js');
* p.position(25, 20);
* p.style('color', 'deeppink');
*
* describe('The text p5*js written in pink on a gray background.');
* }
*
*
* function setup() {
* background(200);
*
* // Create a p5.Color object.
* let c = color('deeppink');
*
* // Create a paragraph element and
* // set its font color using a
* // p5.Color object.
* let p = createP('p5*js');
* p.position(25, 20);
* p.style('color', c);
*
* describe('The text p5*js written in pink on a gray background.');
* }
*
*
* function setup() {
* background(200);
*
* // Create a paragraph element and
* // set its font color to "deeppink"
* // using property:value syntax.
* let p = createP('p5*js');
* p.position(25, 20);
* p.style('color:deeppink');
*
* describe('The text p5*js written in pink on a gray background.');
* }
*
*
* function setup() {
* background(200);
*
* // Create an empty paragraph element
* // and set its font color to "deeppink".
* let p = createP();
* p.position(5, 5);
* p.style('color', 'deeppink');
*
* // Get the element's color as an
* // RGB color string.
* let c = p.style('color');
*
* // Set the element's inner HTML
* // using the RGB color string.
* p.html(c);
*
* describe('The text "rgb(255, 20, 147)" written in pink on a gray background.');
* }
*
*
* function setup() {
* // Create a container div and
* // place it at the top-left
* // corner.
* let container = createDiv();
* container.position(0, 0);
*
* // Create a paragraph element
* // and place it within the container.
* // Set its horizontal alignment to
* // "left".
* let p1 = createP('hi');
* p1.parent(container);
* p1.attribute('align', 'left');
*
* // Create a paragraph element
* // and place it within the container.
* // Set its horizontal alignment to
* // "center".
* let p2 = createP('hi');
* p2.parent(container);
* p2.attribute('align', 'center');
*
* // Create a paragraph element
* // and place it within the container.
* // Set its horizontal alignment to
* // "right".
* let p3 = createP('hi');
* p3.parent(container);
* p3.attribute('align', 'right');
*
* describe('A gray square with the text "hi" written on three separate lines, each placed further to the right.');
* }
*
*
* let p;
*
* function setup() {
* background(200);
*
* // Create a paragraph element and place it
* // in the center of the canvas.
* // Set its "align" attribute to "center".
* p = createP('hi');
* p.position(0, 20);
* p.attribute('align', 'center');
*
* describe('The text "hi" written in black at the center of a gray square. The text moves to the left edge when double-clicked.');
* }
*
* function doubleClicked() {
* p.removeAttribute('align');
* }
*
*
* let inp;
*
* function setup() {
* // Create a text input and place it
* // beneath the canvas. Set its default
* // value to "hello".
* inp = createInput('hello');
* inp.position(0, 100);
*
* describe('The text from an input box is displayed on a gray square.');
* }
*
* function draw() {
* background(200);
*
* // Use the input's value to display a message.
* let msg = inp.value();
* text(msg, 0, 55);
* }
*
*
* let inp;
*
* function setup() {
* // Create a text input and place it
* // beneath the canvas. Set its default
* // value to "hello".
* inp = createInput('hello');
* inp.position(0, 100);
*
* describe('The text from an input box is displayed on a gray square. The text resets to "hello" when the user double-clicks the square.');
* }
*
* function draw() {
* background(200);
*
* // Use the input's value to display a message.
* let msg = inp.value();
* text(msg, 0, 55);
* }
*
* // Reset the input's value.
* function doubleClicked() {
* inp.value('hello');
* }
*
*
* let p;
*
* function setup() {
* background(200);
*
* // Create a paragraph element and hide it.
* p = createP('p5*js');
* p.position(10, 10);
* p.hide();
*
* describe('A gray square. The text "p5*js" appears when the user double-clicks the square.');
* }
*
* // Show the paragraph when double-clicked.
* function doubleClicked() {
* p.show();
* }
*
*
* function setup() {
* background(200);
*
* // Create a pink div element and place it at
* // the top-left corner.
* let div = createDiv();
* div.position(10, 10);
* div.style('background-color', 'deeppink');
*
* // Set the div's width to 80 pixels and
* // height to 20 pixels.
* div.size(80, 20);
*
* describe('A gray square with a pink rectangle near its top.');
* }
*
*
* function setup() {
* background(200);
*
* // Create a pink div element and place it at
* // the top-left corner.
* let div = createDiv();
* div.position(10, 10);
* div.style('background-color', 'deeppink');
*
* // Set the div's width to 80 pixels and
* // height to 40 pixels.
* div.size(80, 40);
*
* // Get the div's size as an object.
* let s = div.size();
* // Write the div's dimensions.
* div.html(`${s.width} x ${s.height}`);
*
* describe('A gray square with a pink rectangle near its top. The text "80 x 40" is written within the rectangle.');
* }
*
*
* function setup() {
* background(200);
*
* // Load an image of an astronaut on the moon
* // and place it at the top-left of the canvas.
* let img1 = createImg(
* 'assets/moonwalk.jpg',
* 'An astronaut walking on the moon',
* ''
* );
* img1.position(0, 0);
*
* // Load an image of an astronaut on the moon
* // and place it at the top-left of the canvas.
* // Resize the image once it's loaded.
* let img2 = createImg(
* 'assets/moonwalk.jpg',
* 'An astronaut walking on the moon',
* '',
* () => {
* img2.size(50, AUTO);
* }
* );
* img2.position(0, 0);
*
* describe('A gray square two copies of a space image at the top-left. The copy in front is smaller.');
* }
*
*
* let p;
*
* function setup() {
* background(200);
*
* // Create a paragraph element.
* p = createP('p5*js');
* p.position(10, 10);
*
* describe('The text "p5*js" written at the center of a gray square. ');
* }
*
* // Remove the paragraph when double-clicked.
* function doubleClicked() {
* p.remove();
* }
*
*
* // Drop an image on the canvas to view
* // this example.
* let img;
*
* function setup() {
* let c = createCanvas(100, 100);
*
* background(200);
*
* // Call a function when a file
* // dropped on the canvas has
* // loaded.
* c.drop(file => {
* // Remove the current image, if any.
* if (img) {
* img.remove();
* }
*
* // Create an
element with the
* // dropped file.
* img = createImg(file.data, '');
* img.hide();
*
* // Draw the image.
* image(img, 0, 0, width, height);
* });
*
* describe('A gray square. When the user drops an image on the square, it is displayed.');
* }
*
*
* // Drop an image on the canvas to view
* // this example.
* let img;
* let msg;
*
* function setup() {
* let c = createCanvas(100, 100);
*
* background(200);
*
* // Call functions when the user
* // drops a file on the canvas
* // and when the file loads.
* c.drop(handleFile, handleDrop);
*
* describe('A gray square. When the user drops an image on the square, it is displayed. The id attribute of canvas element is also displayed.');
* }
*
* function handleFile(file) {
* // Remove the current image, if any.
* if (img) {
* img.remove();
* }
*
* // Create an
element with the
* // dropped file.
* img = createImg(file.data, '');
* img.hide();
*
* // Draw the image.
* image(img, 0, 0, width, height);
* }
*
* function handleDrop(event) {
* // Remove current paragraph, if any.
* if (msg) {
* msg.remove();
* }
*
* // Use event to get the drop
* // target's id.
* let id = event.target.id;
*
* // Write the canvas' id
* // beneath it.
* msg = createP(id);
* msg.position(0, 100);
*
* // Set the font color
* // randomly for each drop.
* let c = random(['red', 'green', 'blue']);
* msg.style('color', c);
* msg.style('font-size', '12px');
* }
*
*
* function setup() {
* createCanvas(100, 100);
* background(200);
*
* createDiv('Post-It')
* .position(5, 5)
* .size(75, 20)
* .style('font-size', '16px')
* .style('background', 'yellow')
* .style('color', '#000')
* .style('border', '1px solid #aaaa00')
* .style('padding', '5px')
* .draggable();
* // .style('cursor', 'help') // override cursor
*
* let gui = createDiv('')
* .position(5, 40)
* .size(85, 50)
* .style('font-size', '16px')
* .style('background', 'yellow')
* .style('z-index', '100')
* .style('border', '1px solid #00aaaa');
*
* createDiv('= PANEL =')
* .parent(gui)
* .style('background', 'cyan')
* .style('padding', '2px')
* .style('text-align', 'center')
* .draggable(gui);
*
* createSlider(0, 100, random(100))
* .style('cursor', 'pointer')
* .size(80, 5)
* .parent(gui);
* }
*
* let capture;
*
* function setup() {
* createCanvas(100, 100);
*
* // Create a p5.MediaElement using createCapture().
* capture = createCapture(VIDEO);
* capture.hide();
* }
*
* function draw() {
* // Display the video stream and invert the colors.
* image(capture, 0, 0, width, width * capture.height / capture.width);
* filter(INVERT);
* }
*
*
* let beat;
*
* function setup() {
* // Create a p5.MediaElement using createAudio().
* beat = createAudio('assets/beat.mp3');
*
* describe('The text "https://p5js.org/reference/assets/beat.mp3" written in black on a gray background.');
* }
*
* function draw() {
* background(200);
*
* textWrap(CHAR);
* text(beat.src, 10, 10, 80, 80);
* }
*
*
* let beat;
*
* function setup() {
* background(200);
*
* textAlign(CENTER);
* text('Click to play', 50, 50);
*
* // Create a p5.MediaElement using createAudio().
* beat = createAudio('assets/beat.mp3');
*
* describe('The text "Click to play" written in black on a gray background. A beat plays when the user clicks the square.');
* }
*
* // Play the beat when the user
* // presses the mouse.
* function mousePressed() {
* beat.play();
* }
*
*
* let beat;
* let isStopped = true;
*
* function setup() {
* // Create a p5.MediaElement using createAudio().
* beat = createAudio('assets/beat.mp3');
*
* describe('The text "Click to start" written in black on a gray background. The beat starts or stops when the user presses the mouse.');
* }
*
* function draw() {
* background(200);
*
* textAlign(CENTER);
* if (isStopped === true) {
* text('Click to start', 50, 50);
* } else {
* text('Click to stop', 50, 50);
* }
* }
*
* // Adjust playback when the user
* // presses the mouse.
* function mousePressed() {
* if (isStopped === true) {
* // If the beat is stopped,
* // play it.
* beat.play();
* isStopped = false;
* } else {
* // If the beat is playing,
* // stop it.
* beat.stop();
* isStopped = true;
* }
* }
*
*
* let beat;
* let isPaused = true;
*
* function setup() {
* // Create a p5.MediaElement using createAudio().
* beat = createAudio('assets/beat.mp3');
*
* describe('The text "Click to play" written in black on a gray background. The beat plays or pauses when the user clicks the square.');
* }
*
* function draw() {
* background(200);
*
* // Display different instructions
* // based on playback.
* textAlign(CENTER);
* if (isPaused === true) {
* text('Click to play', 50, 50);
* } else {
* text('Click to pause', 50, 50);
* }
* }
*
* // Adjust playback when the user
* // presses the mouse.
* function mousePressed() {
* if (isPaused === true) {
* // If the beat is paused,
* // play it.
* beat.play();
* isPaused = false;
* } else {
* // If the beat is playing,
* // pause it.
* beat.pause();
* isPaused = true;
* }
* }
*
*
* let beat;
* let isLooping = false;
*
* function setup() {
* background(200);
*
* // Create a p5.MediaElement using createAudio().
* beat = createAudio('assets/beat.mp3');
*
* describe('The text "Click to loop" written in black on a gray background. A beat plays repeatedly in a loop when the user clicks. The beat stops when the user clicks again.');
* }
*
* function draw() {
* background(200);
*
* // Display different instructions
* // based on playback.
* textAlign(CENTER);
* if (isLooping === true) {
* text('Click to stop', 50, 50);
* } else {
* text('Click to loop', 50, 50);
* }
* }
*
* // Adjust playback when the user
* // presses the mouse.
* function mousePressed() {
* if (isLooping === true) {
* // If the beat is looping,
* // stop it.
* beat.stop();
* isLooping = false;
* } else {
* // If the beat is stopped,
* // loop it.
* beat.loop();
* isLooping = true;
* }
* }
*
*
* let beat;
* let isPlaying = false;
*
* function setup() {
* background(200);
*
* // Create a p5.MediaElement using createAudio().
* beat = createAudio('assets/beat.mp3');
*
* describe('The text "Click to play" written in black on a gray background. A beat plays when the user clicks. The beat stops when the user clicks again.');
* }
*
* function draw() {
* background(200);
*
* // Display different instructions
* // based on playback.
* textAlign(CENTER);
* if (isPlaying === true) {
* text('Click to stop', 50, 50);
* } else {
* text('Click to play', 50, 50);
* }
* }
*
* // Adjust playback when the user
* // presses the mouse.
* function mousePressed() {
* if (isPlaying === true) {
* // If the beat is playing,
* // stop it.
* beat.stop();
* isPlaying = false;
* } else {
* // If the beat is stopped,
* // play it.
* beat.play();
* isPlaying = true;
* }
* }
*
*
* function setup() {
* noCanvas();
*
* // Load a video and play it automatically.
* let video = createVideo('assets/fingers.mov', () => {
* video.autoplay();
* video.size(100, 100);
* });
*
* describe('A video of fingers walking on a treadmill.');
* }
*
*
* function setup() {
* noCanvas();
*
* // Load a video, but don't play it automatically.
* let video = createVideo('assets/fingers.mov', () => {
* video.autoplay(false);
* video.size(100, 100);
* });
*
* // Play the video when the user clicks on it.
* video.mousePressed(() => {
* video.play();
* });
*
* describe('An image of fingers on a treadmill. They start walking when the user double-clicks on them.');
* }
*
*
* let dragon;
*
* function setup() {
* // Create a p5.MediaElement using createAudio().
* dragon = createAudio('assets/lucky_dragons.mp3');
* // Show the default media controls.
* dragon.showControls();
*
* describe('The text "Volume: V" on a gray square with media controls beneath it. The number "V" oscillates between 0 and 1 as the music plays.');
* }
*
* function draw() {
* background(200);
*
* // Produce a number between 0 and 1.
* let n = 0.5 * sin(frameCount * 0.01) + 0.5;
* // Use n to set the volume.
* dragon.volume(n);
*
* // Get the current volume
* // and display it.
* let v = dragon.volume();
* // Round v to 1 decimal place
* // for display.
* v = round(v, 1);
* textAlign(CENTER);
* text(`Volume: ${v}`, 50, 50);
* }
*
*
* let dragon;
*
* function setup() {
* // Create a p5.MediaElement using createAudio().
* dragon = createAudio('assets/lucky_dragons.mp3');
*
* // Show the default media controls.
* dragon.showControls();
*
* describe('The text "Speed: S" on a gray square with media controls beneath it. The number "S" oscillates between 0 and 1 as the music plays.');
* }
*
* function draw() {
* background(200);
*
* // Produce a number between 0 and 2.
* let n = sin(frameCount * 0.01) + 1;
* // Use n to set the playback speed.
* dragon.speed(n);
*
* // Get the current speed
* // and display it.
* let s = dragon.speed();
* // Round s to 1 decimal place
* // for display.
* s = round(s, 1);
* textAlign(CENTER);
* text(`Speed: ${s}`, 50, 50);
* }
*
*/
/**
* @method speed
* @param {Number} speed speed multiplier for playback.
* @chainable
*/
},
{
key: 'speed',
value: function speed(val) {
if (typeof val === 'undefined') {
return this.presetPlaybackRate || this.elt.playbackRate;
} else {
if (this.loadedmetadata) {
this.elt.playbackRate = val;
} else {
this.presetPlaybackRate = val;
}
}
} /**
* Manages the media element's playback time. Calling `media.time()`
* returns the number of seconds the audio/video has played. Time resets to
* 0 when the looping media restarts.
*
* The parameter, `time`, is optional. It's a number that specifies the
* time, in seconds, to jump to when playback begins.
*
* @method time
* @return {Number} current time (in seconds).
*
* @example
*
* let dragon;
*
* function setup() {
* // Create a p5.MediaElement using createAudio().
* dragon = createAudio('assets/lucky_dragons.mp3');
* // Show the default media controls.
* dragon.showControls();
*
* describe('The text "S seconds" on a gray square with media controls beneath it. The number "S" increases as the song plays.');
* }
*
* function draw() {
* background(200);
*
* // Display the current time.
* let s = dragon.time();
* // Round s to 1 decimal place
* // for display.
* s = round(s, 1);
* textAlign(CENTER);
* text(`${s} seconds`, 50, 50);
* }
*
*
* let dragon;
*
* function setup() {
* // Create a p5.MediaElement using createAudio().
* dragon = createAudio('assets/lucky_dragons.mp3');
* // Show the default media controls.
* dragon.showControls();
*
* // Jump to 2 seconds
* // to start.
* dragon.time(2);
*
* describe('The text "S seconds" on a gray square with media controls beneath it. The number "S" increases as the song plays.');
* }
*
* function draw() {
* background(200);
*
* // Display the current time.
* let s = dragon.time();
* // Round s to 1 decimal place
* // for display.
* s = round(s, 1);
* textAlign(CENTER);
* text(`${s} seconds`, 50, 50);
* }
*
*
* let dragon;
*
* function setup() {
* background(200);
*
* // Create a p5.MediaElement using createAudio().
* dragon = createAudio('assets/lucky_dragons.mp3');
* // Show the default media controls.
* dragon.showControls();
*
* describe('The text "S seconds left" on a gray square with media controls beneath it. The number "S" decreases as the song plays.');
* }
*
* function draw() {
* background(200);
*
* // Calculate the time remaining.
* let s = dragon.duration() - dragon.time();
* // Round s to 1 decimal place
* // for display.
* s = round(s, 1);
*
* // Display the time remaining.
* textAlign(CENTER);
* text(`${s} seconds left`, 50, 50);
* }
*
*
* let beat;
* let isPlaying = false;
* let isDone = false;
*
* function setup() {
*
* // Create a p5.MediaElement using createAudio().
* beat = createAudio('assets/beat.mp3');
*
* // Set isDone to false when
* // the beat finishes.
* beat.onended(() => {
* isDone = true;
* });
*
* describe('The text "Click to play" written in black on a gray square. A beat plays when the user clicks. The text "Done!" appears when the beat finishes playing.');
* }
*
* function draw() {
* background(200);
*
* // Display different messages
* // based on playback.
* textAlign(CENTER);
* if (isDone === true) {
* text('Done!', 50, 50);
* } else if (isPlaying === false) {
* text('Click to play', 50, 50);
* } else {
* text('Playing...', 50, 50);
* }
* }
*
* // Play the beat when the
* // user presses the mouse.
* function mousePressed() {
* if (isPlaying === false) {
* isPlaying = true;
* beat.play();
* }
* }
*
*
* function setup() {
* background('cornflowerblue');
*
* textAlign(CENTER);
* textSize(50);
* text('🐉', 50, 50);
*
* // Create a p5.MediaElement using createAudio().
* let dragon = createAudio('assets/lucky_dragons.mp3');
* // Show the default media controls.
* dragon.showControls();
*
* describe('A dragon emoji, 🐉, drawn in the center of a blue square. A song plays in the background. Audio controls are displayed beneath the canvas.');
* }
*
*
* let dragon;
* let isHidden = false;
*
* function setup() {
* // Create a p5.MediaElement using createAudio().
* dragon = createAudio('assets/lucky_dragons.mp3');
* // Show the default media controls.
* dragon.showControls();
*
* describe('The text "Double-click to hide controls" written in the middle of a gray square. A song plays in the background. Audio controls are displayed beneath the canvas. The controls appear/disappear when the user double-clicks the square.');
* }
*
* function draw() {
* background(200);
*
* // Display a different message when
* // controls are hidden or shown.
* textAlign(CENTER);
* if (isHidden === true) {
* text('Double-click to show controls', 10, 20, 80, 80);
* } else {
* text('Double-click to hide controls', 10, 20, 80, 80);
* }
* }
*
* // Show/hide controls based on a double-click.
* function doubleClicked() {
* if (isHidden === true) {
* dragon.showControls();
* isHidden = false;
* } else {
* dragon.hideControls();
* isHidden = true;
* }
* }
*
*
* function setup() {
* // Create a p5.MediaElement using createAudio().
* let beat = createAudio('assets/beat.mp3');
* // Play the beat in a loop.
* beat.loop();
*
* // Schedule a few events.
* beat.addCue(0, changeBackground, 'red');
* beat.addCue(2, changeBackground, 'deeppink');
* beat.addCue(4, changeBackground, 'orchid');
* beat.addCue(6, changeBackground, 'lavender');
*
* describe('A red square with a beat playing in the background. Its color changes every 2 seconds while the audio plays.');
* }
*
* function changeBackground(c) {
* background(c);
* }
*
*
* let lavenderID;
* let isRemoved = false;
*
* function setup() {
* // Create a p5.MediaElement using createAudio().
* let beat = createAudio('assets/beat.mp3');
* // Play the beat in a loop.
* beat.loop();
*
* // Schedule a few events.
* beat.addCue(0, changeBackground, 'red');
* beat.addCue(2, changeBackground, 'deeppink');
* beat.addCue(4, changeBackground, 'orchid');
*
* // Record the ID of the "lavender" callback.
* lavenderID = beat.addCue(6, changeBackground, 'lavender');
*
* describe('The text "Double-click to remove lavender." written on a red square. The color changes every 2 seconds while the audio plays. The lavender option is removed when the user double-clicks the square.');
* }
*
* function draw() {
* if (isRemoved === false) {
* text('Double-click to remove lavender.', 10, 10, 80, 80);
* } else {
* text('No more lavender.', 10, 10, 80, 80);
* }
* }
*
* function changeBackground(c) {
* background(c);
* }
*
* // Remove the lavender color-change cue
* // when the user double-clicks.
* function doubleClicked() {
* if (isRemoved === false) {
* beat.removeCue(lavenderID);
* isRemoved = true;
* }
* }
*
*
* let isChanging = true;
*
* function setup() {
* background(200);
*
* // Create a p5.MediaElement using createAudio().
* let beat = createAudio('assets/beat.mp3');
* // Play the beat in a loop.
* beat.loop();
*
* // Schedule a few events.
* beat.addCue(0, changeBackground, 'red');
* beat.addCue(2, changeBackground, 'deeppink');
* beat.addCue(4, changeBackground, 'orchid');
* beat.addCue(6, changeBackground, 'lavender');
*
* describe('The text "Double-click to stop changing." written on a square. The color changes every 2 seconds while the audio plays. The color stops changing when the user double-clicks the square.');
* }
*
* function draw() {
* if (isChanging === true) {
* text('Double-click to stop changing.', 10, 10, 80, 80);
* } else {
* text('No more changes.', 10, 10, 80, 80);
* }
* }
*
* function changeBackground(c) {
* background(c);
* }
*
* // Remove cued functions and stop
* // changing colors when the user
* // double-clicks.
* function doubleClicked() {
* if (isChanging === true) {
* beat.clearCues();
* isChanging = false;
* }
* }
*
*
* // Use the file input to load a
* // file and display its info.
*
* function setup() {
* background(200);
*
* // Create a file input and place it beneath
* // the canvas. Call displayInfo() when
* // the file loads.
* let input = createFileInput(displayInfo);
* input.position(0, 100);
*
* describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');
* }
*
* // Display the p5.File's info
* // once it loads.
* function displayInfo(file) {
* background(200);
*
* // Display the p5.File's name.
* text(file.name, 10, 10, 80, 40);
* // Display the p5.File's type and subtype.
* text(`${file.type}/${file.subtype}`, 10, 70);
* // Display the p5.File's size in bytes.
* text(file.size, 10, 90);
* }
*
*
* // Use the file input to select an image to
* // load and display.
* let img;
*
* function setup() {
* // Create a file input and place it beneath
* // the canvas. Call handleImage() when
* // the file image loads.
* let input = createFileInput(handleImage);
* input.position(0, 100);
*
* describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');
* }
*
* function draw() {
* background(200);
*
* // Draw the image if it's ready.
* if (img) {
* image(img, 0, 0, width, height);
* }
* }
*
* // Use the p5.File's data once
* // it loads.
* function handleImage(file) {
* // Check the p5.File's type.
* if (file.type === 'image') {
* // Create an image using using
* // the p5.File's data.
* img = createImg(file.data, '');
*
* // Hide the image element so it
* // doesn't appear twice.
* img.hide();
* } else {
* img = null;
* }
* }
*
*
* // Use the file input to load a
* // file and display its info.
*
* function setup() {
* background(200);
*
* // Create a file input and place it beneath
* // the canvas. Call displayInfo() when
* // the file loads.
* let input = createFileInput(displayInfo);
* input.position(0, 100);
*
* describe('A gray square with a file input beneath it. If the user loads a file, its info is written in black.');
* }
*
* // Use the p5.File once
* // it loads.
* function displayInfo(file) {
* background(200);
*
* // Display the p5.File's name.
* text(file.name, 10, 10, 80, 40);
* // Display the p5.File's type and subtype.
* text(`${file.type}/${file.subtype}`, 10, 70);
* // Display the p5.File's size in bytes.
* text(file.size, 10, 90);
* }
*
*
* // Use the file input to load a
* // file and display its info.
*
* function setup() {
* background(200);
*
* // Create a file input and place it beneath
* // the canvas. Call displayType() when
* // the file loads.
* let input = createFileInput(displayType);
* input.position(0, 100);
*
* describe('A gray square with a file input beneath it. If the user loads a file, its type is written in black.');
* }
*
* // Display the p5.File's type
* // once it loads.
* function displayType(file) {
* background(200);
*
* // Display the p5.File's type.
* text(`This is file's type is: ${file.type}`, 10, 10, 80, 80);
* }
*
*
* // Use the file input to load a
* // file and display its info.
*
* function setup() {
* background(200);
*
* // Create a file input and place it beneath
* // the canvas. Call displaySubtype() when
* // the file loads.
* let input = createFileInput(displaySubtype);
* input.position(0, 100);
*
* describe('A gray square with a file input beneath it. If the user loads a file, its subtype is written in black.');
* }
*
* // Display the p5.File's type
* // once it loads.
* function displaySubtype(file) {
* background(200);
*
* // Display the p5.File's subtype.
* text(`This is file's subtype is: ${file.subtype}`, 10, 10, 80, 80);
* }
*
*
* // Use the file input to load a
* // file and display its info.
*
* function setup() {
* background(200);
*
* // Create a file input and place it beneath
* // the canvas. Call displayName() when
* // the file loads.
* let input = createFileInput(displayName);
* input.position(0, 100);
*
* describe('A gray square with a file input beneath it. If the user loads a file, its name is written in black.');
* }
*
* // Display the p5.File's name
* // once it loads.
* function displayName(file) {
* background(200);
*
* // Display the p5.File's name.
* text(`This is file's name is: ${file.name}`, 10, 10, 80, 80);
* }
*
*
* // Use the file input to load a
* // file and display its info.
*
* function setup() {
* background(200);
*
* // Create a file input and place it beneath
* // the canvas. Call displaySize() when
* // the file loads.
* let input = createFileInput(displaySize);
* input.position(0, 100);
*
* describe('A gray square with a file input beneath it. If the user loads a file, its size in bytes is written in black.');
* }
*
* // Display the p5.File's size
* // in bytes once it loads.
* function displaySize(file) {
* background(200);
*
* // Display the p5.File's size.
* text(`This is file has ${file.size} bytes.`, 10, 10, 80, 80);
* }
*
*
* // Use the file input to load a
* // file and display its info.
*
* function setup() {
* background(200);
*
* // Create a file input and place it beneath
* // the canvas. Call displayData() when
* // the file loads.
* let input = createFileInput(displayData);
* input.position(0, 100);
*
* describe('A gray square with a file input beneath it. If the user loads a file, its data is written in black.');
* }
*
* // Display the p5.File's data
* // once it loads.
* function displayData(file) {
* background(200);
*
* // Display the p5.File's data,
* // which looks like a random
* // string of characters.
* text(file.data, 10, 10, 80, 80);
* }
*
*
* // Move a touchscreen device to register
* // acceleration changes.
* function draw() {
* background(220, 50);
* fill('magenta');
* ellipse(width / 2, height / 2, accelerationX);
* describe('Magnitude of device acceleration is displayed as ellipse size.');
* }
*
*
* // Move a touchscreen device to register
* // acceleration changes.
* function draw() {
* background(220, 50);
* fill('magenta');
* ellipse(width / 2, height / 2, accelerationY);
* describe('Magnitude of device acceleration is displayed as ellipse size');
* }
*
*
* // Move a touchscreen device to register
* // acceleration changes.
* function draw() {
* background(220, 50);
* fill('magenta');
* ellipse(width / 2, height / 2, accelerationZ);
* describe('Magnitude of device acceleration is displayed as ellipse size');
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(200);
* //rotateZ(radians(rotationZ));
* rotateX(radians(rotationX));
* //rotateY(radians(rotationY));
* box(200, 200, 200);
* describe(`red horizontal line right, green vertical line bottom.
* black background.`);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(200);
* //rotateZ(radians(rotationZ));
* //rotateX(radians(rotationX));
* rotateY(radians(rotationY));
* box(200, 200, 200);
* describe(`red horizontal line right, green vertical line bottom.
* black background.`);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(200);
* rotateZ(radians(rotationZ));
* //rotateX(radians(rotationX));
* //rotateY(radians(rotationY));
* box(200, 200, 200);
* describe(`red horizontal line right, green vertical line bottom.
* black background.`);
* }
*
*
* // A simple if statement looking at whether
* // rotationX - pRotationX < 0 is true or not will be
* // sufficient for determining the rotate direction
* // in most cases.
*
* // Some extra logic is needed to account for cases where
* // the angles wrap around.
* let rotateDirection = 'clockwise';
*
* // Simple range conversion to make things simpler.
* // This is not absolutely necessary but the logic
* // will be different in that case.
*
* let rX = rotationX + 180;
* let pRX = pRotationX + 180;
*
* if ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {
* rotateDirection = 'clockwise';
* } else if (rX - pRX < 0 || rX - pRX > 270) {
* rotateDirection = 'counter-clockwise';
* }
*
* print(rotateDirection);
* describe('no image to display.');
*
*
* // A simple if statement looking at whether
* // rotationY - pRotationY < 0 is true or not will be
* // sufficient for determining the rotate direction
* // in most cases.
*
* // Some extra logic is needed to account for cases where
* // the angles wrap around.
* let rotateDirection = 'clockwise';
*
* // Simple range conversion to make things simpler.
* // This is not absolutely necessary but the logic
* // will be different in that case.
*
* let rY = rotationY + 180;
* let pRY = pRotationY + 180;
*
* if ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {
* rotateDirection = 'clockwise';
* } else if (rY - pRY < 0 || rY - pRY > 270) {
* rotateDirection = 'counter-clockwise';
* }
* print(rotateDirection);
* describe('no image to display.');
*
*
* // A simple if statement looking at whether
* // rotationZ - pRotationZ < 0 is true or not will be
* // sufficient for determining the rotate direction
* // in most cases.
*
* // Some extra logic is needed to account for cases where
* // the angles wrap around.
* let rotateDirection = 'clockwise';
*
* if (
* (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||
* rotationZ - pRotationZ < -270
* ) {
* rotateDirection = 'clockwise';
* } else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {
* rotateDirection = 'counter-clockwise';
* }
* print(rotateDirection);
* describe('no image to display.');
*
*
* // Run this example on a mobile device
* // Rotate the device by 90 degrees in the
* // X-axis to change the value.
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe(`50-by-50 black rect in center of canvas.
* turns white on mobile when device turns`);
* describe(`50-by-50 black rect in center of canvas.
* turns white on mobile when x-axis turns`);
* }
* function deviceTurned() {
* if (turnAxis === 'X') {
* if (value === 0) {
* value = 255;
* } else if (value === 255) {
* value = 0;
* }
* }
* }
*
*
* // Run this example on a mobile device
* // You will need to move the device incrementally further
* // the closer the square's color gets to white in order to change the value.
*
* let value = 0;
* let threshold = 0.5;
* function setup() {
* setMoveThreshold(threshold);
* }
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe(`50-by-50 black rect in center of canvas.
* turns white on mobile when device moves`);
* }
* function deviceMoved() {
* value = value + 5;
* threshold = threshold + 0.1;
* if (value > 255) {
* value = 0;
* threshold = 30;
* }
* setMoveThreshold(threshold);
* }
*
*
* // Run this example on a mobile device
* // You will need to shake the device more firmly
* // the closer the box's fill gets to white in order to change the value.
*
* let value = 0;
* let threshold = 30;
* function setup() {
* setShakeThreshold(threshold);
* }
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe(`50-by-50 black rect in center of canvas.
* turns white on mobile when device is being shaked`);
* }
* function deviceMoved() {
* value = value + 5;
* threshold = threshold + 5;
* if (value > 255) {
* value = 0;
* threshold = 30;
* }
* setShakeThreshold(threshold);
* }
*
*
* // Run this example on a mobile device
* // Move the device around
* // to change the value.
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe(`50-by-50 black rect in center of canvas.
* turns white on mobile when device moves`);
* }
* function deviceMoved() {
* value = value + 5;
* if (value > 255) {
* value = 0;
* }
* }
*
*
* // Run this example on a mobile device
* // Rotate the device by 90 degrees
* // to change the value.
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe(`50-by-50 black rect in center of canvas.
* turns white on mobile when device turns`);
* }
* function deviceTurned() {
* if (value === 0) {
* value = 255;
* } else if (value === 255) {
* value = 0;
* }
* }
*
*
* // Run this example on a mobile device
* // Rotate the device by 90 degrees in the
* // X-axis to change the value.
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe(`50-by-50 black rect in center of canvas.
* turns white on mobile when x-axis turns`);
* }
* function deviceTurned() {
* if (turnAxis === 'X') {
* if (value === 0) {
* value = 255;
* } else if (value === 255) {
* value = 0;
* }
* }
* }
*
*
* // Run this example on a mobile device
* // Shake the device to change the value.
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe(`50-by-50 black rect in center of canvas.
* turns white on mobile when device shakes`);
* }
* function deviceShaken() {
* value = value + 5;
* if (value > 255) {
* value = 0;
* }
* }
*
*
* function draw() {
* if (keyIsPressed === true) {
* fill(0);
* } else {
* fill(255);
* }
* rect(25, 25, 50, 50);
* describe('50-by-50 white rect that turns black on keypress.');
* }
*
*
* // Click any key to display it!
* // (Not Guaranteed to be Case Sensitive)
* function setup() {
* fill(245, 123, 158);
* textSize(50);
* }
*
* function draw() {
* background(200);
* text(key, 33, 65); // Display last key pressed.
* describe('canvas displays any key value that is pressed in pink font.');
* }
*
* let fillVal = 126;
* function draw() {
* fill(fillVal);
* rect(25, 25, 50, 50);
* describe(`Grey rect center. turns white when up arrow pressed and black when down.
* Display key pressed and its keyCode in a yellow box.`);
* }
*
* function keyPressed() {
* if (keyCode === UP_ARROW) {
* fillVal = 255;
* } else if (keyCode === DOWN_ARROW) {
* fillVal = 0;
* }
* }
*
* function draw() {}
* function keyPressed() {
* background('yellow');
* text(`${key} ${keyCode}`, 10, 40);
* print(key, ' ', keyCode);
* }
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe(`black rect center. turns white when key pressed and black
* when released.`);
* }
* function keyPressed() {
* if (value === 0) {
* value = 255;
* } else {
* value = 0;
* }
* }
*
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe(`black rect center. turns white when left arrow pressed and
* black when right.`);
* }
* function keyPressed() {
* if (keyCode === LEFT_ARROW) {
* value = 255;
* } else if (keyCode === RIGHT_ARROW) {
* value = 0;
* }
* }
*
*
* function keyPressed() {
* // Do something
* return false; // prevent any default behaviour
* }
*
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe(`black rect center. turns white when key pressed and black
* when pressed again`);
* }
* function keyReleased() {
* if (value === 0) {
* value = 255;
* } else {
* value = 0;
* }
* return false; // prevent any default behavior
* }
*
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe(`black rect center. turns white when 'a' key typed and
* black when 'b' pressed`);
* }
* function keyTyped() {
* if (key === 'a') {
* value = 255;
* } else if (key === 'b') {
* value = 0;
* }
* // uncomment to prevent any default behavior
* // return false;
* }
*
*
* let x = 100;
* let y = 100;
*
* function setup() {
* createCanvas(512, 512);
* fill(255, 0, 0);
* }
*
* function draw() {
* if (keyIsDown(LEFT_ARROW)) {
* x -= 5;
* }
*
* if (keyIsDown(RIGHT_ARROW)) {
* x += 5;
* }
*
* if (keyIsDown(UP_ARROW)) {
* y -= 5;
* }
*
* if (keyIsDown(DOWN_ARROW)) {
* y += 5;
* }
*
* clear();
* ellipse(x, y, 50, 50);
* describe(`50-by-50 red ellipse moves left, right, up, and
* down with arrow presses.`);
* }
*
* let diameter = 50;
*
* function setup() {
* createCanvas(512, 512);
* }
*
* function draw() {
* // 107 and 187 are keyCodes for "+"
* if (keyIsDown(107) || keyIsDown(187)) {
* diameter += 1;
* }
*
* // 109 and 189 are keyCodes for "-"
* if (keyIsDown(109) || keyIsDown(189)) {
* diameter -= 1;
* }
*
* clear();
* fill(255, 0, 0);
* ellipse(50, 50, diameter, diameter);
* describe(`50-by-50 red ellipse gets bigger or smaller when
* + or - are pressed.`);
* }
*
* let x = 50;
* function setup() {
* rectMode(CENTER);
* }
*
* function draw() {
* if (x > 48) {
* x -= 2;
* } else if (x < 48) {
* x += 2;
* }
* x += floor(movedX / 5);
* background(237, 34, 93);
* fill(0);
* rect(x, 50, 50, 50);
* describe(`box moves left and right according to mouse movement
* then slowly back towards the center`);
* }
*
*
* let y = 50;
* function setup() {
* rectMode(CENTER);
* }
*
* function draw() {
* if (y > 48) {
* y -= 2;
* } else if (y < 48) {
* y += 2;
* }
* y += floor(movedY / 5);
* background(237, 34, 93);
* fill(0);
* rect(50, y, 50, 50);
* describe(`box moves up and down according to mouse movement then
* slowly back towards the center`);
* }
*
*
* // Move the mouse across the canvas
* function draw() {
* background(244, 248, 252);
* line(mouseX, 0, mouseX, 100);
* describe('horizontal black line moves left and right with mouse x-position');
* }
*
*
* // Move the mouse across the canvas
* function draw() {
* background(244, 248, 252);
* line(0, mouseY, 100, mouseY);
* describe('vertical black line moves up and down with mouse y-position');
* }
*
*
* // Move the mouse across the canvas to leave a trail
* function setup() {
* //slow down the frameRate to make it more visible
* frameRate(10);
* }
*
* function draw() {
* background(244, 248, 252);
* line(mouseX, mouseY, pmouseX, pmouseY);
* print(pmouseX + ' -> ' + mouseX);
* describe(`line trail is created from cursor movements.
* faster movement make longer line.`);
* }
*
*
* function draw() {
* background(237, 34, 93);
* fill(0);
* //draw a square only if the mouse is not moving
* if (mouseY === pmouseY && mouseX === pmouseX) {
* rect(20, 20, 60, 60);
* }
*
* print(pmouseY + ' -> ' + mouseY);
* describe(`60-by-60 black rect center, fuchsia background.
* rect flickers on mouse movement`);
* }
*
*
* let myCanvas;
*
* function setup() {
* //use a variable to store a pointer to the canvas
* myCanvas = createCanvas(100, 100);
* let body = document.getElementsByTagName('body')[0];
* myCanvas.parent(body);
* }
*
* function draw() {
* background(237, 34, 93);
* fill(0);
*
* //move the canvas to the horizontal mouse position
* //relative to the window
* myCanvas.position(winMouseX + 1, windowHeight / 2);
*
* //the y of the square is relative to the canvas
* rect(20, mouseY, 60, 60);
* describe(`60-by-60 black rect y moves with mouse y and fuchsia
* canvas moves with mouse x`);
* }
*
*
* let myCanvas;
*
* function setup() {
* //use a variable to store a pointer to the canvas
* myCanvas = createCanvas(100, 100);
* let body = document.getElementsByTagName('body')[0];
* myCanvas.parent(body);
* }
*
* function draw() {
* background(237, 34, 93);
* fill(0);
*
* //move the canvas to the vertical mouse position
* //relative to the window
* myCanvas.position(windowWidth / 2, winMouseY + 1);
*
* //the x of the square is relative to the canvas
* rect(mouseX, 20, 60, 60);
* describe(`60-by-60 black rect x moves with mouse x and
* fuchsia canvas y moves with mouse y`);
* }
*
*
* let myCanvas;
*
* function setup() {
* //use a variable to store a pointer to the canvas
* myCanvas = createCanvas(100, 100);
* noStroke();
* fill(237, 34, 93);
* }
*
* function draw() {
* clear();
* //the difference between previous and
* //current x position is the horizontal mouse speed
* let speed = abs(winMouseX - pwinMouseX);
* //change the size of the circle
* //according to the horizontal speed
* ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
* //move the canvas to the mouse position
* myCanvas.position(winMouseX + 1, winMouseY + 1);
* describe(`fuchsia ellipse moves with mouse x and y.
* Grows and shrinks with mouse speed`);
* }
*
*
* let myCanvas;
*
* function setup() {
* //use a variable to store a pointer to the canvas
* myCanvas = createCanvas(100, 100);
* noStroke();
* fill(237, 34, 93);
* }
*
* function draw() {
* clear();
* //the difference between previous and
* //current y position is the vertical mouse speed
* let speed = abs(winMouseY - pwinMouseY);
* //change the size of the circle
* //according to the vertical speed
* ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);
* //move the canvas to the mouse position
* myCanvas.position(winMouseX + 1, winMouseY + 1);
* describe(`fuchsia ellipse moves with mouse x and y.
* Grows and shrinks with mouse speed`);
* }
*
*
* function draw() {
* background(237, 34, 93);
* fill(0);
*
* if (mouseIsPressed === true) {
* if (mouseButton === LEFT) {
* ellipse(50, 50, 50, 50);
* }
* if (mouseButton === RIGHT) {
* rect(25, 25, 50, 50);
* }
* if (mouseButton === CENTER) {
* triangle(23, 75, 50, 20, 78, 75);
* }
* }
*
* print(mouseButton);
* describe(`50-by-50 black ellipse appears on center of fuchsia
* canvas on mouse click/press.`);
* }
*
*
* function draw() {
* background(237, 34, 93);
* fill(0);
*
* if (mouseIsPressed === true) {
* ellipse(50, 50, 50, 50);
* } else {
* rect(25, 25, 50, 50);
* }
*
* print(mouseIsPressed);
* describe(`black 50-by-50 rect becomes ellipse with mouse click/press.
* fuchsia background.`);
* }
*
*
* // Move the mouse across the page
* // to change its value
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe(`black 50-by-50 rect becomes lighter with mouse movements until
* white then resets no image displayed`);
* }
* function mouseMoved() {
* value = value + 5;
* if (value > 255) {
* value = 0;
* }
* }
*
*
* function mouseMoved() {
* ellipse(mouseX, mouseY, 5, 5);
* // prevent default
* return false;
* }
*
*
* // returns a MouseEvent object
* // as a callback argument
* function mouseMoved(event) {
* console.log(event);
* }
*
*
* // Drag the mouse across the page
* // to change its value
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe(`black 50-by-50 rect turns lighter with mouse click and
* drag until white, resets`);
* }
* function mouseDragged() {
* value = value + 5;
* if (value > 255) {
* value = 0;
* }
* }
*
*
* function mouseDragged() {
* ellipse(mouseX, mouseY, 5, 5);
* // prevent default
* return false;
* }
*
*
* // returns a MouseEvent object
* // as a callback argument
* function mouseDragged(event) {
* console.log(event);
* }
*
*
* // Click anywhere in the webpage to change
* // the color value of the rectangle
*
* let colorValue = 0;
* function draw() {
* fill(colorValue);
* rect(25, 25, 50, 50);
* describe('black 50-by-50 rect turns white with mouse click/press.');
* }
* function mousePressed() {
* if (colorValue === 0) {
* colorValue = 255;
* } else {
* colorValue = 0;
* }
* }
*
*
* function mousePressed() {
* ellipse(mouseX, mouseY, 5, 5);
* // prevent default
* return false;
* }
*
*
* // returns a MouseEvent object
* // as a callback argument
* function mousePressed(event) {
* console.log(event);
* }
*
*
* // Click within the image to change
* // the value of the rectangle
* // after the mouse has been clicked
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe('black 50-by-50 rect turns white with mouse click/press.');
* }
* function mouseReleased() {
* if (value === 0) {
* value = 255;
* } else {
* value = 0;
* }
* }
*
*
* function mouseReleased() {
* ellipse(mouseX, mouseY, 5, 5);
* // prevent default
* return false;
* }
*
*
* // returns a MouseEvent object
* // as a callback argument
* function mouseReleased(event) {
* console.log(event);
* }
*
*
* // Click within the image to change
* // the value of the rectangle
* // after the mouse has been clicked
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe('black 50-by-50 rect turns white with mouse click/press.');
* }
*
* function mouseClicked() {
* if (value === 0) {
* value = 255;
* } else {
* value = 0;
* }
* }
*
*
* function mouseClicked() {
* ellipse(mouseX, mouseY, 5, 5);
* // prevent default
* return false;
* }
*
*
* // returns a MouseEvent object
* // as a callback argument
* function mouseClicked(event) {
* console.log(event);
* }
*
*
* // Click within the image to change
* // the value of the rectangle
* // after the mouse has been double clicked
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe('black 50-by-50 rect turns white with mouse doubleClick/press.');
* }
*
* function doubleClicked() {
* if (value === 0) {
* value = 255;
* } else {
* value = 0;
* }
* }
*
*
* function doubleClicked() {
* ellipse(mouseX, mouseY, 5, 5);
* // prevent default
* return false;
* }
*
*
* // returns a MouseEvent object
* // as a callback argument
* function doubleClicked(event) {
* console.log(event);
* }
*
*
* let pos = 25;
*
* function draw() {
* background(237, 34, 93);
* fill(0);
* rect(25, pos, 50, 50);
* describe(`black 50-by-50 rect moves up and down with vertical scroll.
* fuchsia background`);
* }
*
* function mouseWheel(event) {
* print(event.delta);
* //move the square according to the vertical scroll amount
* pos += event.delta;
* //uncomment to block page scrolling
* //return false;
* }
*
*
* let cam;
* function setup() {
* createCanvas(100, 100, WEBGL);
* requestPointerLock();
* cam = createCamera();
* }
*
* function draw() {
* background(255);
* cam.pan(-movedX * 0.001);
* cam.tilt(movedY * 0.001);
* sphere(25);
* describe(`3D scene moves according to mouse mouse movement in a
* first person perspective`);
* }
*
*
* //click the canvas to lock the pointer
* //click again to exit (otherwise escape)
* let locked = false;
* function draw() {
* background(237, 34, 93);
* describe('cursor gets locked / unlocked on mouse-click');
* }
* function mouseClicked() {
* if (!locked) {
* locked = true;
* requestPointerLock();
* } else {
* exitPointerLock();
* locked = false;
* }
* }
*
*
* // On a touchscreen device, touch
* // the canvas using one or more fingers
* // at the same time
* function draw() {
* clear();
* let display = touches.length + ' touches';
* text(display, 5, 10);
* describe(`Number of touches currently registered are displayed
* on the canvas`);
* }
*
*
* // Touch within the image to change
* // the value of the rectangle
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe('50-by-50 black rect turns white with touch event.');
* }
* function touchStarted() {
* if (value === 0) {
* value = 255;
* } else {
* value = 0;
* }
* }
*
*
* function touchStarted() {
* ellipse(mouseX, mouseY, 5, 5);
* // prevent default
* return false;
* }
* describe('no image displayed');
*
*
* // returns a TouchEvent object
* // as a callback argument
* function touchStarted(event) {
* console.log(event);
* }
* describe('no image displayed');
*
*
* // Move your finger across the page
* // to change its value
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe('50-by-50 black rect turns lighter with touch until white. resets');
* }
* function touchMoved() {
* value = value + 5;
* if (value > 255) {
* value = 0;
* }
* }
*
*
* function touchMoved() {
* ellipse(mouseX, mouseY, 5, 5);
* // prevent default
* return false;
* }
* describe('no image displayed');
*
*
* // returns a TouchEvent object
* // as a callback argument
* function touchMoved(event) {
* console.log(event);
* }
* describe('no image displayed');
*
*
* // Release touch within the image to
* // change the value of the rectangle
*
* let value = 0;
* function draw() {
* fill(value);
* rect(25, 25, 50, 50);
* describe('50-by-50 black rect turns white with touch.');
* }
* function touchEnded() {
* if (value === 0) {
* value = 255;
* } else {
* value = 0;
* }
* }
*
*
* function touchEnded() {
* ellipse(mouseX, mouseY, 5, 5);
* // prevent default
* return false;
* }
* describe('no image displayed');
*
*
* // returns a TouchEvent object
* // as a callback argument
* function touchEnded(event) {
* console.log(event);
* }
* describe('no image displayed');
*
*
* let img = createImage(66, 66);
* img.loadPixels();
* for (let x = 0; x < img.width; x += 1) {
* for (let y = 0; y < img.height; y += 1) {
* img.set(x, y, 0);
* }
* }
* img.updatePixels();
* image(img, 17, 17);
*
* describe('A black square drawn in the middle of a gray square.');
*
*
* let img = createImage(66, 66);
* img.loadPixels();
* for (let x = 0; x < img.width; x += 1) {
* for (let y = 0; y < img.height; y += 1) {
* let a = map(x, 0, img.width, 0, 255);
* let c = color(0, a);
* img.set(x, y, c);
* }
* }
* img.updatePixels();
* image(img, 17, 17);
*
* describe('A square with a horizontal color gradient that transitions from gray to black.');
*
*
* let img = createImage(66, 66);
* img.loadPixels();
* let d = pixelDensity();
* let halfImage = 4 * (d * img.width) * (d * img.height / 2);
* for (let i = 0; i < halfImage; i += 4) {
* // Red.
* img.pixels[i] = 0;
* // Green.
* img.pixels[i + 1] = 0;
* // Blue.
* img.pixels[i + 2] = 0;
* // Alpha.
* img.pixels[i + 3] = 255;
* }
* img.updatePixels();
* image(img, 17, 17);
*
* describe('A black square drawn in the middle of a gray square.');
*
*
* function setup() {
* createCanvas(100, 100);
* background(255);
* saveCanvas();
* }
*
*
* function setup() {
* createCanvas(100, 100);
* background(255);
* saveCanvas('myCanvas.jpg');
* }
*
*
* function setup() {
* createCanvas(100, 100);
* background(255);
* saveCanvas('myCanvas', 'jpg');
* }
*
*
* function setup() {
* let cnv = createCanvas(100, 100);
* background(255);
* saveCanvas(cnv);
* }
*
*
* function setup() {
* let cnv = createCanvas(100, 100);
* background(255);
* saveCanvas(cnv, 'myCanvas.jpg');
* }
*
*
* function setup() {
* let cnv = createCanvas(100, 100);
* background(255);
* saveCanvas(cnv, 'myCanvas', 'jpg');
* }
*
*
* function draw() {
* let r = frameCount % 255;
* let g = 50;
* let b = 100;
* background(r, g, b);
*
* describe('A square repeatedly changes color from blue to pink.');
* }
*
* function keyPressed() {
* if (key === 's') {
* saveFrames('frame', 'png', 1, 5);
* }
* }
*
*
* function draw() {
* let r = frameCount % 255;
* let g = 50;
* let b = 100;
* background(r, g, b);
*
* describe('A square repeatedly changes color from blue to pink.');
* }
*
* function mousePressed() {
* saveFrames('frame', 'png', 1, 5, data => {
* // Prints an array of objects containing raw image data,
* // filenames, and extensions.
* print(data);
* });
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* describe('Image of the underside of a white umbrella and a gridded ceiling.');
* }
*
*
* function setup() {
* loadImage('assets/laDefense.jpg', img => {
* image(img, 0, 0);
* });
* describe('Image of the underside of a white umbrella and a gridded ceiling.');
* }
*
*
* function setup() {
* loadImage('assets/laDefense.jpg', success, failure);
* }
*
* function success(img) {
* image(img, 0, 0);
* describe('Image of the underside of a white umbrella and a gridded ceiling.');
* }
*
* function failure(event) {
* console.error('Oops!', event);
* }
*
*
* function draw() {
* background(200);
* let c = frameCount % 255;
* fill(c);
* circle(50, 50, 25);
*
* describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');
* }
*
* function keyPressed() {
* if (key === 's') {
* saveGif('mySketch', 5);
* }
* }
*
*
*
* The fourth and fifth parameters, `dw` and `dh`, are optional. They set the
* the width and height to draw the destination image. By default, `image()`
* draws the full source image at its original size.
*
* The sixth and seventh parameters, `sx` and `sy`, are also optional.
* These coordinates define the top left corner of a subsection to draw from
* the source image.
*
* The eighth and ninth parameters, `sw` and `sh`, are also optional.
* They define the width and height of a subsection to draw from the source
* image. By default, `image()` draws the full subsection that begins at
* (`sx`, `sy`) and extends to the edges of the source image.
*
* The ninth parameter, `fit`, is also optional. It enables a subsection of
* the source image to be drawn without affecting its aspect ratio. If
* `CONTAIN` is passed, the full subsection will appear within the destination
* rectangle. If `COVER` is passed, the subsection will completely cover the
* destination rectangle. This may have the effect of zooming into the
* subsection.
*
* The tenth and eleventh paremeters, `xAlign` and `yAlign`, are also
* optional. They determine how to align the fitted subsection. `xAlign` can
* be set to either `LEFT`, `RIGHT`, or `CENTER`. `yAlign` can be set to
* either `TOP`, `BOTTOM`, or `CENTER`. By default, both `xAlign` and `yAlign`
* are set to `CENTER`.
*
* @method image
* @param {p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture} img image to display.
* @param {Number} x x-coordinate of the top-left corner of the image.
* @param {Number} y y-coordinate of the top-left corner of the image.
* @param {Number} [width] width to draw the image.
* @param {Number} [height] height to draw the image.
* @example
*
* let img;
*
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* background(50);
* image(img, 0, 0);
*
* describe('An image of the underside of a white umbrella with a gridded ceiling above.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* background(50);
* image(img, 10, 10);
*
* describe('An image of the underside of a white umbrella with a gridded ceiling above. The image has dark gray borders on its left and top.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* background(50);
* image(img, 0, 0, 50, 50);
*
* describe('An image of the underside of a white umbrella with a gridded ceiling above. The image is drawn in the top left corner of a dark gray square.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* background(50);
* image(img, 25, 25, 50, 50, 25, 25, 50, 50);
*
* describe('An image of a gridded ceiling drawn in the center of a dark gray square.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/moonwalk.jpg');
* }
*
* function setup() {
* background(50);
* image(img, 0, 0, width, height, 0, 0, img.width, img.height, CONTAIN);
*
* describe('An image of an astronaut on the moon. The top and bottom borders of the image are dark gray.');
* }
*
*
* let img;
*
* function preload() {
* // Image is 50 x 50 pixels.
* img = loadImage('assets/laDefense50.png');
* }
*
* function setup() {
* background(50);
* image(img, 0, 0, width, height, 0, 0, img.width, img.height, COVER);
*
* describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* tint('red');
* image(img, 50, 0);
*
* describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* tint(255, 0, 0);
* image(img, 50, 0);
*
* describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* tint(255, 0, 0, 100);
* image(img, 50, 0);
*
* describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a transparent red tint.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* tint(255, 180);
* image(img, 50, 0);
*
* describe('Two images of an umbrella and a ceiling side-by-side. The image on the right is transparent.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
* function setup() {
* tint('red');
* image(img, 0, 0);
* noTint();
* image(img, 50, 0);
*
* describe('Two images of an umbrella and a ceiling side-by-side. The image on the left has a red tint.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* background(200);
* imageMode(CORNER);
* image(img, 10, 10, 50, 50);
*
* describe('A square image of a brick wall is drawn at the top left of a gray square.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* background(200);
* imageMode(CORNERS);
* image(img, 10, 10, 90, 40);
*
* describe('An image of a brick wall is drawn on a gray square. The image is squeezed into a small rectangular area.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* background(200);
* imageMode(CENTER);
* image(img, 50, 50, 80, 80);
*
* describe('A square image of a brick wall is drawn on a gray square.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
*
* describe('An image of a brick wall.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* img.filter(GRAY);
* image(img, 0, 0);
*
* describe('A grayscale image of a brick wall.');
* }
*
*
* background(200);
* let img = createImage(66, 66);
* img.loadPixels();
* for (let x = 0; x < img.width; x += 1) {
* for (let y = 0; y < img.height; y += 1) {
* img.set(x, y, 0);
* }
* }
* img.updatePixels();
* image(img, 17, 17);
*
* describe('A black square drawn in the middle of a gray square.');
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* let x = img.width / 2;
* let y = img.height / 2;
* let d = 20;
* circle(x, y, d);
*
* describe('An image of a mountain landscape with a white circle drawn in the middle.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* let x = img.width / 2;
* let y = img.height / 2;
* let d = 20;
* circle(x, y, d);
*
* describe('An image of a mountain landscape with a white circle drawn in the middle.');
* }
*
*
* let img = createImage(66, 66);
* img.loadPixels();
* let numPixels = 4 * img.width * img.height;
* for (let i = 0; i < numPixels; i += 4) {
* // Red.
* img.pixels[i] = 0;
* // Green.
* img.pixels[i + 1] = 0;
* // Blue.
* img.pixels[i + 2] = 0;
* // Alpha.
* img.pixels[i + 3] = 255;
* }
* img.updatePixels();
* image(img, 17, 17);
*
* describe('A black square drawn in the middle of a gray square.');
*
*
* let img = createImage(66, 66);
* img.loadPixels();
* let numPixels = 4 * img.width * img.height;
* for (let i = 0; i < numPixels; i += 4) {
* // Red.
* img.pixels[i] = 255;
* // Green.
* img.pixels[i + 1] = 0;
* // Blue.
* img.pixels[i + 2] = 0;
* // Alpha.
* img.pixels[i + 3] = 255;
* }
* img.updatePixels();
* image(img, 17, 17);
*
* describe('A red square drawn in the middle of a gray square.');
*
*
* let img = createImage(66, 66);
* img.loadPixels();
* for (let x = 0; x < img.width; x += 1) {
* for (let y = 0; y < img.height; y += 1) {
* img.set(x, y, 0);
* }
* }
* img.updatePixels();
* image(img, 17, 17);
*
* describe('A black square drawn in the middle of a gray square.');
*
*
* let img = createImage(66, 66);
* img.loadPixels();
* let numPixels = 4 * img.width * img.height;
* for (let i = 0; i < numPixels; i += 4) {
* // Red.
* img.pixels[i] = 0;
* // Green.
* img.pixels[i + 1] = 0;
* // Blue.
* img.pixels[i + 2] = 0;
* // Alpha.
* img.pixels[i + 3] = 255;
* }
* img.updatePixels();
* image(img, 17, 17);
*
* describe('A black square drawn in the middle of a gray square.');
*
*
* let img = createImage(66, 66);
* img.loadPixels();
* for (let x = 0; x < img.width; x += 1) {
* for (let y = 0; y < img.height; y += 1) {
* img.set(x, y, 0);
* }
* }
* img.updatePixels();
* image(img, 17, 17);
*
* describe('A black square drawn in the middle of a gray square.');
*
*
* let img = createImage(66, 66);
* img.loadPixels();
* let numPixels = 4 * img.width * img.height;
* for (let i = 0; i < numPixels; i += 4) {
* // Red.
* img.pixels[i] = 0;
* // Green.
* img.pixels[i + 1] = 0;
* // Blue.
* img.pixels[i + 2] = 0;
* // Alpha.
* img.pixels[i + 3] = 255;
* }
* img.updatePixels();
* image(img, 17, 17);
*
* describe('A black square drawn in the middle of a gray square.');
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* let img2 = get();
* image(img2, width / 2, 0);
*
* describe('Two identical mountain landscapes shown side-by-side.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* let c = img.get(50, 90);
* fill(c);
* noStroke();
* square(25, 25, 50);
*
* describe('A mountain landscape with an olive green square in its center.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* let img2 = img.get(0, 0, img.width / 2, img.height / 2);
* image(img2, width / 2, height / 2);
*
* describe('A mountain landscape drawn on top of another mountain landscape.');
* }
*
*
* let img = createImage(100, 100);
* img.set(30, 20, 0);
* img.set(85, 20, 0);
* img.set(85, 75, 0);
* img.set(30, 75, 0);
* img.updatePixels();
* image(img, 0, 0);
*
* describe('Four black dots arranged in a square drawn on a gray background.');
*
*
* let img = createImage(100, 100);
* let black = color(0);
* img.set(30, 20, black);
* img.set(85, 20, black);
* img.set(85, 75, black);
* img.set(30, 75, black);
* img.updatePixels();
* image(img, 0, 0);
*
* describe('Four black dots arranged in a square drawn on a gray background.');
*
*
* let img = createImage(66, 66);
* for (let x = 0; x < img.width; x += 1) {
* for (let y = 0; y < img.height; y += 1) {
* let c = map(x, 0, img.width, 0, 255);
* img.set(x, y, c);
* }
* }
* img.updatePixels();
* image(img, 17, 17);
*
* describe('A square with a horiztonal color gradient from black to white drawn on a gray background.');
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
*
* function setup() {
* let img2 = createImage(100, 100);
* img2.set(0, 0, img);
* image(img2, 0, 0);
*
* describe('An image of a mountain landscape.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
* function setup() {
* image(img, 0, 0);
* img.resize(50, 100);
* image(img, 0, 0);
*
* describe('Two images of a mountain landscape. One copy of the image is squeezed horizontally.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
* function setup() {
* image(img, 0, 0);
* img.resize(0, 30);
* image(img, 0, 0);
*
* describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
* function setup() {
* image(img, 0, 0);
* img.resize(60, 0);
* image(img, 0, 0);
*
* describe('Two images of a mountain landscape. The small copy of the image covers the top-left corner of the larger image.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
*
* function setup() {
* img.copy(7, 22, 10, 10, 35, 25, 50, 50);
* image(img, 0, 0);
* // Outline copied region.
* stroke(255);
* noFill();
* square(7, 22, 10);
*
* describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
* }
*
*
* let mountains;
* let bricks;
*
* function preload() {
* mountains = loadImage('assets/rockies.jpg');
* bricks = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* let x = bricks.width / 2;
* let y = bricks.height / 2;
* mountains.copy(bricks, 0, 0, x, y, 0, 0, x, y);
* image(mountains, 0, 0);
*
* describe('An image of a brick wall drawn at the top-left of an image of a mountain landscape.');
* }
*
*
* let photo;
* let maskImage;
*
* function preload() {
* photo = loadImage('assets/rockies.jpg');
* maskImage = loadImage('assets/mask2.png');
* }
*
* function setup() {
* photo.mask(maskImage);
* image(photo, 0, 0);
*
* describe('An image of a mountain landscape. The right side of the image has a faded patch of white.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* img.filter(INVERT);
* image(img, 0, 0);
*
* describe('A blue brick wall.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* img.filter(GRAY);
* image(img, 0, 0);
*
* describe('A brick wall drawn in grayscale.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* img.filter(THRESHOLD);
* image(img, 0, 0);
*
* describe('A brick wall drawn in black and white.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* img.filter(OPAQUE);
* image(img, 0, 0);
*
* describe('A red brick wall.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* img.filter(POSTERIZE, 3);
* image(img, 0, 0);
*
* describe('An image of a red brick wall drawn with a limited color palette.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* img.filter(BLUR, 3);
* image(img, 0, 0);
*
* describe('A blurry image of a red brick wall.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* img.filter(DILATE);
* image(img, 0, 0);
*
* describe('A red brick wall with bright lines between each brick.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* img.filter(ERODE);
* image(img, 0, 0);
*
* describe('A red brick wall with faint lines between each brick.');
* }
*
*
* let mountains;
* let bricks;
*
* function preload() {
* mountains = loadImage('assets/rockies.jpg');
* bricks = loadImage('assets/bricks_third.jpg');
* }
*
* function setup() {
* mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
* image(mountains, 0, 0);
* image(bricks, 0, 0);
*
* describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
* }
*
*
* let mountains;
* let bricks;
*
* function preload() {
* mountains = loadImage('assets/rockies.jpg');
* bricks = loadImage('assets/bricks_third.jpg');
* }
*
* function setup() {
* mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
* image(mountains, 0, 0);
* image(bricks, 0, 0);
*
* describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
* }
*
*
* let mountains;
* let bricks;
*
* function preload() {
* mountains = loadImage('assets/rockies.jpg');
* bricks = loadImage('assets/bricks_third.jpg');
* }
*
* function setup() {
* mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
* image(mountains, 0, 0);
* image(bricks, 0, 0);
*
* describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
*
* function draw() {
* image(img, 0, 0);
*
* describe('An image of a mountain landscape.');
* }
*
* function keyPressed() {
* if (key === 's') {
* img.save();
* } else if (key === 'j') {
* img.save('rockies.jpg');
* } else if (key === 'p') {
* img.save('rockies', 'png');
* }
* }
*
*
* let gif;
*
* function preload() {
* gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');
* }
*
* function draw() {
* background(255);
* image(gif, 0, 0);
*
* describe('A cartoon face winks once and then freezes. Clicking resets the face and makes it wink again.');
* }
*
* function mousePressed() {
* gif.reset();
* }
*
*
* let gif;
*
* function preload() {
* gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
* }
*
* function draw() {
* let index = gif.getCurrentFrame();
* image(gif, 0, 0);
* text(index, 10, 90);
*
* describe('A cartoon eye repeatedly looks around, then outwards. A number displayed in the bottom-left corner increases from 0 to 124, then repeats.');
* }
*
*
* let gif;
* let frameSlider;
*
* function preload() {
* gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
* }
*
* function setup() {
* let maxFrame = gif.numFrames() - 1;
* frameSlider = createSlider(0, maxFrame);
* frameSlider.position(10, 80);
* frameSlider.size(80);
* }
*
* function draw() {
* let index = frameSlider.value();
* gif.setFrame(index);
* image(gif, 0, 0);
*
* describe('A cartoon eye looks around when a slider is moved.');
* }
*
*
* let gif;
*
* function preload() {
* gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
* }
*
* function draw() {
* image(gif, 0, 0);
* let total = gif.numFrames();
* let index = gif.getCurrentFrame();
* text(`${index} / ${total}`, 30, 90);
*
* describe('A cartoon eye looks around. The text "n / 125" is shown at the bottom of the canvas.');
* }
*
*
* let gif;
*
* function preload() {
* gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
* }
*
* function draw() {
* background(255);
* image(gif, 0, 0);
*
* describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
* }
*
* function mousePressed() {
* gif.pause();
* }
*
* function mouseReleased() {
* gif.play();
* }
*
*
* let gif;
*
* function preload() {
* gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
* }
*
* function draw() {
* background(255);
* image(gif, 0, 0);
*
* describe('A drawing of a child with hair blowing in the wind. The animation freezes when clicked and resumes when released.');
* }
*
* function mousePressed() {
* gif.pause();
* }
*
* function mouseReleased() {
* gif.play();
* }
*
*
* let gifFast;
* let gifSlow;
*
* function preload() {
* gifFast = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
* gifSlow = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
* }
*
* function setup() {
* gifFast.resize(50, 50);
* gifSlow.resize(50, 50);
* gifFast.delay(10);
* gifSlow.delay(100);
* }
*
* function draw() {
* image(gifFast, 0, 0);
* image(gifSlow, 50, 0);
*
* describe('Two animated eyes looking around. The eye on the left moves faster than the eye on the right.');
* }
*
*
* let gif;
*
* function preload() {
* gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');
* }
*
* function setup() {
* gif.delay(3000, 67);
* }
*
* function draw() {
* image(gif, 0, 0);
*
* describe('An animated eye looking around. It pauses for three seconds while it looks down.');
* }
*
*
* loadPixels();
* let x = 50;
* let y = 50;
* let d = pixelDensity();
* for (let i = 0; i < d; i += 1) {
* for (let j = 0; j < d; j += 1) {
* let index = 4 * ((y * d + j) * width * d + (x * d + i));
* // Red.
* pixels[index] = 0;
* // Green.
* pixels[index + 1] = 0;
* // Blue.
* pixels[index + 2] = 0;
* // Alpha.
* pixels[index + 3] = 255;
* }
* }
* updatePixels();
*
* describe('A black dot in the middle of a gray rectangle.');
*
*
* loadPixels();
* let d = pixelDensity();
* let halfImage = 4 * (d * width) * (d * height / 2);
* for (let i = 0; i < halfImage; i += 4) {
* // Red.
* pixels[i] = 255;
* // Green.
* pixels[i + 1] = 0;
* // Blue.
* pixels[i + 2] = 0;
* // Alpha.
* pixels[i + 3] = 255;
* }
* updatePixels();
*
* describe('A red rectangle drawn above a gray rectangle.');
*
*
* let pink = color(255, 102, 204);
* loadPixels();
* let d = pixelDensity();
* let halfImage = 4 * (d * width) * (d * height / 2);
* for (let i = 0; i < halfImage; i += 4) {
* pixels[i] = red(pink);
* pixels[i + 1] = green(pink);
* pixels[i + 2] = blue(pink);
* pixels[i + 3] = alpha(pink);
* }
* updatePixels();
*
* describe('A pink rectangle drawn above a gray rectangle.');
*
*
* let img0;
* let img1;
*
* function preload() {
* img0 = loadImage('assets/rockies.jpg');
* img1 = loadImage('assets/bricks_third.jpg');
* }
*
* function setup() {
* background(img0);
* image(img1, 0, 0);
* blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
*
* describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears faded on the right of the image.');
* }
*
*
* let img0;
* let img1;
*
* function preload() {
* img0 = loadImage('assets/rockies.jpg');
* img1 = loadImage('assets/bricks_third.jpg');
* }
*
* function setup() {
* background(img0);
* image(img1, 0, 0);
* blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
*
* describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears transparent on the right of the image.');
* }
*
*
* let img0;
* let img1;
*
* function preload() {
* img0 = loadImage('assets/rockies.jpg');
* img1 = loadImage('assets/bricks_third.jpg');
* }
*
* function setup() {
* background(img0);
* image(img1, 0, 0);
* blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
*
* describe('A wall of bricks in front of a mountain landscape. The same wall of bricks appears washed out on the right of the image.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
*
* function setup() {
* background(img);
* copy(img, 7, 22, 10, 10, 35, 25, 50, 50);
* // Show copied region.
* stroke(255);
* noFill();
* square(7, 22, 10);
*
* describe('An image of a mountain landscape. A square region is outlined in white. A larger square contains a pixelated view of the outlined region.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* filter(INVERT);
*
* describe('A blue brick wall.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* filter(GRAY);
*
* describe('A brick wall drawn in grayscale.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* filter(THRESHOLD);
*
* describe('A brick wall drawn in black and white.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* filter(OPAQUE);
*
* describe('A red brick wall.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* filter(POSTERIZE, 3);
*
* describe('An image of a red brick wall drawn with limited color palette.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* filter(BLUR, 3);
*
* describe('A blurry image of a red brick wall.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* filter(DILATE);
*
* describe('A red brick wall with bright lines between each brick.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* filter(ERODE);
*
* describe('A red brick wall with faint lines between each brick.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* // Don't use WebGL.
* filter(BLUR, 3, false);
*
* describe('A blurry image of a red brick wall.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* let c = get();
* image(c, width / 2, 0);
*
* describe('Two identical mountain landscapes shown side-by-side.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* let c = get(50, 90);
* fill(c);
* noStroke();
* square(25, 25, 50);
*
* describe('A mountain landscape with an olive green square in its center.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
*
* function setup() {
* image(img, 0, 0);
* let c = get(0, 0, width / 2, height / 2);
* image(c, width / 2, height / 2);
*
* describe('A mountain landscape drawn on top of another mountain landscape.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
*
* function setup() {
* image(img, 0, 0, width, height);
* let d = pixelDensity();
* let halfImage = 4 * (d * width) * (d * height / 2);
* loadPixels();
* for (let i = 0; i < halfImage; i += 1) {
* pixels[i + halfImage] = pixels[i];
* }
* updatePixels();
*
* describe('Two identical images of mountain landscapes, one on top of the other.');
* }
*
*
* set(30, 20, 0);
* set(85, 20, 0);
* set(85, 75, 0);
* set(30, 75, 0);
* updatePixels();
*
* describe('Four black dots arranged in a square drawn on a gray background.');
*
*
* let black = color(0);
* set(30, 20, black);
* set(85, 20, black);
* set(85, 75, black);
* set(30, 75, black);
* updatePixels();
*
* describe('Four black dots arranged in a square drawn on a gray background.');
*
*
* for (let x = 0; x < width; x += 1) {
* for (let y = 0; y < height; y += 1) {
* let c = map(x, 0, width, 0, 255);
* set(x, y, c);
* }
* }
* updatePixels();
*
* describe('A horiztonal color gradient from black to white.');
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
*
* function setup() {
* set(0, 0, img);
* updatePixels();
*
* describe('An image of a mountain landscape.');
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/rockies.jpg');
* }
*
* function setup() {
* image(img, 0, 0, width, height);
* let d = pixelDensity();
* let halfImage = 4 * (d * width) * (d * height / 2);
* loadPixels();
* for (let i = 0; i < halfImage; i += 1) {
* pixels[i + halfImage] = pixels[i];
* }
* updatePixels();
*
* describe('Two identical images of mountain landscapes, one on top of the other.');
* }
*
*
* // Examples use USGS Earthquake API:
* // https://earthquake.usgs.gov/fdsnws/event/1/#methods
* let earthquakes;
* function preload() {
* // Get the most recent earthquake in the database
* let url =
'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +
* 'summary/all_day.geojson';
* earthquakes = loadJSON(url);
* }
*
* function setup() {
* noLoop();
* }
*
* function draw() {
* background(200);
* // Get the magnitude and name of the earthquake out of the loaded JSON
* let earthquakeMag = earthquakes.features[0].properties.mag;
* let earthquakeName = earthquakes.features[0].properties.place;
* ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
* textAlign(CENTER);
* text(earthquakeName, 0, height - 30, width, 30);
* describe(`50×50 ellipse that changes from black to white
* depending on the current humidity`);
* }
*
* function setup() {
* noLoop();
* let url =
'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +
* 'summary/all_day.geojson';
* loadJSON(url, drawEarthquake);
* }
*
* function draw() {
* background(200);
* describe(`50×50 ellipse that changes from black to white
* depending on the current humidity`);
* }
*
* function drawEarthquake(earthquakes) {
* // Get the magnitude and name of the earthquake out of the loaded JSON
* let earthquakeMag = earthquakes.features[0].properties.mag;
* let earthquakeName = earthquakes.features[0].properties.place;
* ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
* textAlign(CENTER);
* text(earthquakeName, 0, height - 30, width, 30);
* }
*
* let result;
* function preload() {
* result = loadStrings('assets/test.txt');
* }
* function setup() {
* background(200);
* text(random(result), 10, 10, 80, 80);
* describe(`randomly generated text from a file,
* for example "i smell like butter"`);
* }
*
* function setup() {
* loadStrings('assets/test.txt', pickString);
* describe(`randomly generated text from a file,
* for example "i have three feet"`);
* }
*
* function pickString(result) {
* background(200);
* text(random(result), 10, 10, 80, 80);
* }
*
* // Given the following CSV file called "mammals.csv"
* // located in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* //the file can be remote
* //table = loadTable("http://p5js.org/reference/assets/mammals.csv",
* // "csv", "header");
* }
*
* function setup() {
* //count the columns
* print(table.getRowCount() + ' total rows in table');
* print(table.getColumnCount() + ' total columns in table');
*
* print(table.getColumn('name'));
* //["Goat", "Leopard", "Zebra"]
*
* //cycle through the table
* for (let r = 0; r < table.getRowCount(); r++)
* for (let c = 0; c < table.getColumnCount(); c++) {
* print(table.getString(r, c));
* }
* describe(`randomly generated text from a file,
* for example "i smell like butter"`);
* }
*
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* let children = xml.getChildren('animal');
*
* for (let i = 0; i < children.length; i++) {
* let id = children[i].getNum('id');
* let coloring = children[i].getString('species');
* let name = children[i].getContent();
* print(id + ', ' + coloring + ', ' + name);
* }
* describe('no image displayed');
* }
*
* // Sketch prints:
* // 0, Capra hircus, Goat
* // 1, Panthera pardus, Leopard
* // 2, Equus zebra, Zebra
*
* let data;
*
* function preload() {
* data = loadBytes('assets/mammals.xml');
* }
*
* function setup() {
* for (let i = 0; i < 5; i++) {
* console.log(data.bytes[i].toString(16));
* }
* describe('no image displayed');
* }
* httpDo(path, 'GET'). The 'binary' datatype will return
* a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
* which can be used to initialize typed arrays (such as Uint8Array).
*
* @method httpGet
* @param {String} path name of the file or url to load
* @param {String} [datatype] "json", "jsonp", "binary", "arrayBuffer",
* "xml", or "text"
* @param {Object|Boolean} [data] param data passed sent with request
* @param {function} [callback] function to be executed after
* httpGet() completes, data is passed in
* as first argument
* @param {function} [errorCallback] function to be executed if
* there is an error, response is passed
* in as first argument
* @return {Promise} A promise that resolves with the data when the operation
* completes successfully or rejects with the error after
* one occurs.
* @example
*
* // Examples use USGS Earthquake API:
* // https://earthquake.usgs.gov/fdsnws/event/1/#methods
* let earthquakes;
* function preload() {
* // Get the most recent earthquake in the database
* let url =
'https://earthquake.usgs.gov/fdsnws/event/1/query?' +
* 'format=geojson&limit=1&orderby=time';
* httpGet(url, 'jsonp', false, function(response) {
* // when the HTTP request completes, populate the variable that holds the
* // earthquake data used in the visualization.
* earthquakes = response;
* });
* }
*
* function draw() {
* if (!earthquakes) {
* // Wait until the earthquake data has loaded before drawing.
* return;
* }
* background(200);
* // Get the magnitude and name of the earthquake out of the loaded JSON
* let earthquakeMag = earthquakes.features[0].properties.mag;
* let earthquakeName = earthquakes.features[0].properties.place;
* ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);
* textAlign(CENTER);
* text(earthquakeName, 0, height - 30, width, 30);
* noLoop();
* }
* httpDo(path, 'POST').
*
* @method httpPost
* @param {String} path name of the file or url to load
* @param {String} [datatype] "json", "jsonp", "xml", or "text".
* If omitted, httpPost() will guess.
* @param {Object|Boolean} [data] param data passed sent with request
* @param {function} [callback] function to be executed after
* httpPost() completes, data is passed in
* as first argument
* @param {function} [errorCallback] function to be executed if
* there is an error, response is passed
* in as first argument
* @return {Promise} A promise that resolves with the data when the operation
* completes successfully or rejects with the error after
* one occurs.
*
* @example
*
* // Examples use jsonplaceholder.typicode.com for a Mock Data API
*
* let url = 'https://jsonplaceholder.typicode.com/posts';
* let postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is very cool.' };
*
* function setup() {
* createCanvas(100, 100);
* background(200);
* }
*
* function mousePressed() {
* httpPost(url, 'json', postData, function(result) {
* strokeWeight(2);
* text(result.body, mouseX, mouseY);
* });
* }
*
*
* let url = 'ttps://invalidURL'; // A bad URL that will cause errors
* let postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };
*
* function setup() {
* createCanvas(100, 100);
* background(200);
* }
*
* function mousePressed() {
* httpPost(
* url,
* 'json',
* postData,
* function(result) {
* // ... won't be called
* },
* function(error) {
* strokeWeight(2);
* text(error.toString(), mouseX, mouseY);
* }
* );
* }
*
* // Examples use USGS Earthquake API:
* // https://earthquake.usgs.gov/fdsnws/event/1/#methods
*
* // displays an animation of all USGS earthquakes
* let earthquakes;
* let eqFeatureIndex = 0;
*
* function preload() {
* let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
* httpDo(
* url,
* {
* method: 'GET',
* // Other Request options, like special headers for apis
* headers: { authorization: 'Bearer secretKey' }
* },
* function(res) {
* earthquakes = res;
* }
* );
* }
*
* function draw() {
* // wait until the data is loaded
* if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {
* return;
* }
* clear();
*
* let feature = earthquakes.features[eqFeatureIndex];
* let mag = feature.properties.mag;
* let rad = mag / 11 * ((width + height) / 2);
* fill(255, 0, 0, 100);
* ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);
*
* if (eqFeatureIndex >= earthquakes.features.length) {
* eqFeatureIndex = 0;
* } else {
* eqFeatureIndex += 1;
* }
* }
*
*
* function setup() {
* createCanvas(100, 100);
* background(200);
* text('click here to save', 10, 10, 70, 80);
* }
*
* function mousePressed() {
* if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
* const writer = createWriter('squares.txt');
* for (let i = 0; i < 10; i++) {
* writer.print(i * i);
* }
* writer.close();
* writer.clear();
* }
* }
*
*
* // creates a file called 'newFile.txt'
* let writer = createWriter('newFile.txt');
* // write 'Hello world!'' to the file
* writer.write(['Hello world!']);
* // close the PrintWriter and save the file
* writer.close();
*
*
* // creates a file called 'newFile2.txt'
* let writer = createWriter('newFile2.txt');
* // write 'apples,bananas,123' to the file
* writer.write(['apples', 'bananas', 123]);
* // close the PrintWriter and save the file
* writer.close();
*
*
* // creates a file called 'newFile3.txt'
* let writer = createWriter('newFile3.txt');
* // write 'My name is: Teddy' to the file
* writer.write('My name is:');
* writer.write(' Teddy');
* // close the PrintWriter and save the file
* writer.close();
*
*
* function setup() {
* createCanvas(100, 100);
* button = createButton('SAVE FILE');
* button.position(21, 40);
* button.mousePressed(createFile);
* }
*
* function createFile() {
* // creates a file called 'newFile.txt'
* let writer = createWriter('newFile.txt');
* // write 'Hello world!'' to the file
* writer.write(['Hello world!']);
* // close the PrintWriter and save the file
* writer.close();
* }
*
*
* // creates a file called 'newFile.txt'
* let writer = createWriter('newFile.txt');
* // creates a file containing
* // My name is:
* // Teddy
* writer.print('My name is:');
* writer.print('Teddy');
* // close the PrintWriter and save the file
* writer.close();
*
*
* let writer;
*
* function setup() {
* createCanvas(400, 400);
* // create a PrintWriter
* writer = createWriter('newFile.txt');
* }
*
* function draw() {
* writer.print([mouseX, mouseY]);
* }
*
* function mouseClicked() {
* writer.close();
* }
*
*
* // create writer object
* let writer = createWriter('newFile.txt');
* writer.write(['clear me']);
* // clear writer object here
* writer.clear();
* // close writer
* writer.close();
*
* function setup() {
* button = createButton('CLEAR ME');
* button.position(21, 40);
* button.mousePressed(createFile);
* }
*
* function createFile() {
* let writer = createWriter('newFile.txt');
* writer.write(['clear me']);
* writer.clear();
* writer.close();
* }
*
*
* // create a file called 'newFile.txt'
* let writer = createWriter('newFile.txt');
* // close the PrintWriter and save the file
* writer.close();
*
*
* // create a file called 'newFile2.txt'
* let writer = createWriter('newFile2.txt');
* // write some data to the file
* writer.write([100, 101, 102]);
* // close the PrintWriter and save the file
* writer.close();
*
* true indicates that the
* output will be optimized for filesize,
* rather than readability.
*
* @example
*
* // Saves the canvas as an image
* cnv = createCanvas(300, 300);
* save(cnv, 'myCanvas.jpg');
*
* // Saves the canvas as an image by default
* save('myCanvas.jpg');
* describe('An example for saving a canvas as an image.');
*
* // Saves p5.Image as an image
* img = createImage(10, 10);
* save(img, 'myImage.png');
* describe('An example for saving a p5.Image element as an image.');
*
* // Saves p5.Renderer object as an image
* obj = createGraphics(100, 100);
* save(obj, 'myObject.png');
* describe('An example for saving a p5.Renderer element.');
*
* let myTable = new p5.Table();
* // Saves table as html file
* save(myTable, 'myTable.html');
*
* // Comma Separated Values
* save(myTable, 'myTable.csv');
*
* // Tab Separated Values
* save(myTable, 'myTable.tsv');
*
* describe(`An example showing how to save a table in formats of
* HTML, CSV and TSV.`);
*
* let myJSON = { a: 1, b: true };
*
* // Saves pretty JSON
* save(myJSON, 'my.json');
*
* // Optimizes JSON filesize
* save(myJSON, 'my.json', true);
*
* describe('An example for saving JSON to a txt file with some extra arguments.');
*
* // Saves array of strings to text file with line breaks after each item
* let arrayOfStrings = ['a', 'b'];
* save(arrayOfStrings, 'my.txt');
* describe(`An example for saving an array of strings to text file
* with line breaks.`);
*
* let json = {}; // new JSON Object
*
* json.id = 0;
* json.species = 'Panthera leo';
* json.name = 'Lion';
*
* function setup() {
* createCanvas(100, 100);
* background(200);
* text('click here to save', 10, 10, 70, 80);
* describe('no image displayed');
* }
*
* function mousePressed() {
* if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
* saveJSON(json, 'lion.json');
* }
* }
*
* // saves the following to a file called "lion.json":
* // {
* // "id": 0,
* // "species": "Panthera leo",
* // "name": "Lion"
* // }
*
* let words = 'apple bear cat dog';
*
* // .split() outputs an Array
* let list = split(words, ' ');
*
* function setup() {
* createCanvas(100, 100);
* background(200);
* text('click here to save', 10, 10, 70, 80);
* describe('no image displayed');
* }
*
* function mousePressed() {
* if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
* saveStrings(list, 'nouns.txt');
* }
* }
*
* // Saves the following to a file called 'nouns.txt':
* //
* // apple
* // bear
* // cat
* // dog
*
* let table;
*
* function setup() {
* table = new p5.Table();
*
* table.addColumn('id');
* table.addColumn('species');
* table.addColumn('name');
*
* let newRow = table.addRow();
* newRow.setNum('id', table.getRowCount() - 1);
* newRow.setString('species', 'Panthera leo');
* newRow.setString('name', 'Lion');
*
* // To save, un-comment next line then click 'run'
* // saveTable(table, 'new.csv');
*
* describe('no image displayed');
* }
*
* // Saves the following to a file called 'new.csv':
* // id,species,name
* // 0,Panthera leo,Lion
* | '.concat(e)); pWriter.print(' | '); } pWriter.print('
| '.concat(htmlEntry)); pWriter.print(' | '); } pWriter.print('
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* //print the column names
* for (let c = 0; c < table.getColumnCount(); c++) {
* print('column ' + c + ' is named ' + table.columns[c]);
* }
* }
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* //add a row
* let newRow = table.addRow();
* newRow.setString('id', table.getRowCount() - 1);
* newRow.setString('species', 'Canis Lupus');
* newRow.setString('name', 'Wolf');
*
* //print the results
* for (let r = 0; r < table.getRowCount(); r++)
* for (let c = 0; c < table.getColumnCount(); c++)
* print(table.getString(r, c));
*
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* //remove the first row
* table.removeRow(0);
*
* //print the results
* for (let r = 0; r < table.getRowCount(); r++)
* for (let c = 0; c < table.getColumnCount(); c++)
* print(table.getString(r, c));
*
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* let row = table.getRow(1);
* //print it column by column
* //note: a row is an object, not an array
* for (let c = 0; c < table.getColumnCount(); c++) {
* print(row.getString(c));
* }
*
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* let rows = table.getRows();
*
* //warning: rows is an array of objects
* for (let r = 0; r < rows.length; r++) {
* rows[r].set('name', 'Unicorn');
* }
*
* //print the results
* for (let r = 0; r < table.getRowCount(); r++)
* for (let c = 0; c < table.getColumnCount(); c++)
* print(table.getString(r, c));
*
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* //find the animal named zebra
* let row = table.findRow('Zebra', 'name');
* //find the corresponding species
* print(row.getString('species'));
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* //add another goat
* let newRow = table.addRow();
* newRow.setString('id', table.getRowCount() - 1);
* newRow.setString('species', 'Scape Goat');
* newRow.setString('name', 'Goat');
*
* //find the rows containing animals named Goat
* let rows = table.findRows('Goat', 'name');
* print(rows.length + ' Goats found');
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* //Search using specified regex on a given column, return TableRow object
* let mammal = table.matchRow(new RegExp('ant'), 1);
* print(mammal.getString(1));
* //Output "Panthera pardus"
* }
*
*
* let table;
*
* function setup() {
* table = new p5.Table();
*
* table.addColumn('name');
* table.addColumn('type');
*
* let newRow = table.addRow();
* newRow.setString('name', 'Lion');
* newRow.setString('type', 'Mammal');
*
* newRow = table.addRow();
* newRow.setString('name', 'Snake');
* newRow.setString('type', 'Reptile');
*
* newRow = table.addRow();
* newRow.setString('name', 'Mosquito');
* newRow.setString('type', 'Insect');
*
* newRow = table.addRow();
* newRow.setString('name', 'Lizard');
* newRow.setString('type', 'Reptile');
*
* let rows = table.matchRows('R.*', 'type');
* for (let i = 0; i < rows.length; i++) {
* print(rows[i].getString('name') + ': ' + rows[i].getString('type'));
* }
* }
* // Sketch prints:
* // Snake: Reptile
* // Lizard: Reptile
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* //getColumn returns an array that can be printed directly
* print(table.getColumn('species'));
* //outputs ["Capra hircus", "Panthera pardus", "Equus zebra"]
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* table.clearRows();
* print(table.getRowCount() + ' total rows in table');
* print(table.getColumnCount() + ' total columns in table');
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* table.addColumn('carnivore');
* table.set(0, 'carnivore', 'no');
* table.set(1, 'carnivore', 'yes');
* table.set(2, 'carnivore', 'no');
*
* //print the results
* for (let r = 0; r < table.getRowCount(); r++)
* for (let c = 0; c < table.getColumnCount(); c++)
* print(table.getString(r, c));
*
* describe('no image displayed');
* }
*
*
* // given the cvs file "blobs.csv" in /assets directory
* // ID, Name, Flavor, Shape, Color
* // Blob1, Blobby, Sweet, Blob, Pink
* // Blob2, Saddy, Savory, Blob, Blue
*
* let table;
*
* function preload() {
* table = loadTable('assets/blobs.csv');
* }
*
* function setup() {
* createCanvas(200, 100);
* textAlign(CENTER);
* background(255);
* }
*
* function draw() {
* let numOfColumn = table.getColumnCount();
* text('There are ' + numOfColumn + ' columns in the table.', 100, 50);
* }
*
*
* // given the cvs file "blobs.csv" in /assets directory
* //
* // ID, Name, Flavor, Shape, Color
* // Blob1, Blobby, Sweet, Blob, Pink
* // Blob2, Saddy, Savory, Blob, Blue
*
* let table;
*
* function preload() {
* table = loadTable('assets/blobs.csv');
* }
*
* function setup() {
* createCanvas(200, 100);
* textAlign(CENTER);
* background(255);
* }
*
* function draw() {
* text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);
* }
*
*
* function setup() {
* let table = new p5.Table();
*
* table.addColumn('name');
* table.addColumn('type');
*
* let newRow = table.addRow();
* newRow.setString('name', ' $Lion ,');
* newRow.setString('type', ',,,Mammal');
*
* newRow = table.addRow();
* newRow.setString('name', '$Snake ');
* newRow.setString('type', ',,,Reptile');
*
* table.removeTokens(',$ ');
* print(table.getArray());
* }
*
* // prints:
* // 0 "Lion" "Mamal"
* // 1 "Snake" "Reptile"
*
* function setup() {
* let table = new p5.Table();
*
* table.addColumn('name');
* table.addColumn('type');
*
* let newRow = table.addRow();
* newRow.setString('name', ' Lion ,');
* newRow.setString('type', ' Mammal ');
*
* newRow = table.addRow();
* newRow.setString('name', ' Snake ');
* newRow.setString('type', ' Reptile ');
*
* table.trim();
* print(table.getArray());
* }
*
* // prints:
* // 0 "Lion" "Mamal"
* // 1 "Snake" "Reptile"
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* table.removeColumn('id');
* print(table.getColumnCount());
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* table.set(0, 'species', 'Canis Lupus');
* table.set(0, 'name', 'Wolf');
*
* //print the results
* for (let r = 0; r < table.getRowCount(); r++)
* for (let c = 0; c < table.getColumnCount(); c++)
* print(table.getString(r, c));
*
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* table.setNum(1, 'id', 1);
*
* print(table.getColumn(0));
* //["0", 1, "2"]
*
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv" in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* //add a row
* let newRow = table.addRow();
* newRow.setString('id', table.getRowCount() - 1);
* newRow.setString('species', 'Canis Lupus');
* newRow.setString('name', 'Wolf');
*
* print(table.getArray());
*
* describe('no image displayed');
* }
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* print(table.get(0, 1));
* //Capra hircus
* print(table.get(0, 'species'));
* //Capra hircus
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* print(table.getNum(1, 0) + 100);
* //id 1 + 100 = 101
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* // table is comma separated value "CSV"
* // and has specifiying header for column labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* print(table.getString(0, 0)); // 0
* print(table.getString(0, 1)); // Capra hircus
* print(table.getString(0, 2)); // Goat
* print(table.getString(1, 0)); // 1
* print(table.getString(1, 1)); // Panthera pardus
* print(table.getString(1, 2)); // Leopard
* print(table.getString(2, 0)); // 2
* print(table.getString(2, 1)); // Equus zebra
* print(table.getString(2, 2)); // Zebra
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* let tableObject = table.getObject();
*
* print(tableObject);
* //outputs an object
*
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv"
* // in the project's "assets" folder
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leoperd
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* // table is comma separated value "CSV"
* // and has specifiying header for column labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* let tableArray = table.getArray();
* for (let i = 0; i < tableArray.length; i++) {
* print(tableArray[i]);
* }
* describe('no image displayed');
* }
*
*
* // Given the CSV file "mammals.csv" in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* let rows = table.getRows();
* for (let r = 0; r < rows.length; r++) {
* rows[r].set('name', 'Unicorn');
* }
*
* //print the results
* print(table.getArray());
*
* describe('no image displayed');
* }
*
* // Given the CSV file "mammals.csv" in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* let rows = table.getRows();
* for (let r = 0; r < rows.length; r++) {
* rows[r].setNum('id', r + 10);
* }
*
* print(table.getArray());
*
* describe('no image displayed');
* }
*
* // Given the CSV file "mammals.csv" in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* let rows = table.getRows();
* for (let r = 0; r < rows.length; r++) {
* let name = rows[r].getString('name');
* rows[r].setString('name', 'A ' + name + ' named George');
* }
*
* print(table.getArray());
*
* describe('no image displayed');
* }
*
* // Given the CSV file "mammals.csv" in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* let names = [];
* let rows = table.getRows();
* for (let r = 0; r < rows.length; r++) {
* names.push(rows[r].get('name'));
* }
*
* print(names);
*
* describe('no image displayed');
* }
*
* // Given the CSV file "mammals.csv" in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* let rows = table.getRows();
* let minId = Infinity;
* let maxId = -Infinity;
* for (let r = 0; r < rows.length; r++) {
* let id = rows[r].getNum('id');
* minId = min(minId, id);
* maxId = min(maxId, id);
* }
* print('minimum id = ' + minId + ', maximum id = ' + maxId);
* describe('no image displayed');
* }
*
* // Given the CSV file "mammals.csv" in the project's "assets" folder:
* //
* // id,species,name
* // 0,Capra hircus,Goat
* // 1,Panthera pardus,Leopard
* // 2,Equus zebra,Zebra
*
* let table;
*
* function preload() {
* //my table is comma separated value "csv"
* //and has a header specifying the columns labels
* table = loadTable('assets/mammals.csv', 'csv', 'header');
* }
*
* function setup() {
* let rows = table.getRows();
* let longest = '';
* for (let r = 0; r < rows.length; r++) {
* let species = rows[r].getString('species');
* if (longest.length < species.length) {
* longest = species;
* }
* }
*
* print('longest: ' + longest);
*
* describe('no image displayed');
* }
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* let children = xml.getChildren('animal');
*
* for (let i = 0; i < children.length; i++) {
* let id = children[i].getNum('id');
* let coloring = children[i].getString('species');
* let name = children[i].getContent();
* print(id + ', ' + coloring + ', ' + name);
* }
*
* describe('no image displayed');
* }
*
* // Sketch prints:
* // 0, Capra hircus, Goat
* // 1, Panthera pardus, Leopard
* // 2, Equus zebra, Zebra
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* let children = xml.getChildren('animal');
* let parent = children[1].getParent();
* print(parent.getName());
* }
*
* // Sketch prints:
* // mammals
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* print(xml.getName());
* }
*
* // Sketch prints:
* // mammals
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* print(xml.getName());
* xml.setName('fish');
* print(xml.getName());
* }
*
* // Sketch prints:
* // mammals
* // fish
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* print(xml.hasChildren());
* }
*
* // Sketch prints:
* // true
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* print(xml.listChildren());
* }
*
* // Sketch prints:
* // ["animal", "animal", "animal"]
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* let animals = xml.getChildren('animal');
*
* for (let i = 0; i < animals.length; i++) {
* print(animals[i].getContent());
* }
* }
*
* // Sketch prints:
* // "Goat"
* // "Leopard"
* // "Zebra"
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* let firstChild = xml.getChild('animal');
* print(firstChild.getContent());
* }
*
* // Sketch prints:
* // "Goat"
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* let secondChild = xml.getChild(1);
* print(secondChild.getContent());
* }
*
* // Sketch prints:
* // "Leopard"
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* let child = new p5.XML();
* child.setName('animal');
* child.setAttribute('id', '3');
* child.setAttribute('species', 'Ornithorhynchus anatinus');
* child.setContent('Platypus');
* xml.addChild(child);
*
* let animals = xml.getChildren('animal');
* print(animals[animals.length - 1].getContent());
* }
*
* // Sketch prints:
* // "Goat"
* // "Leopard"
* // "Zebra"
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* xml.removeChild('animal');
* let children = xml.getChildren();
* for (let i = 0; i < children.length; i++) {
* print(children[i].getContent());
* }
* }
*
* // Sketch prints:
* // "Leopard"
* // "Zebra"
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* xml.removeChild(1);
* let children = xml.getChildren();
* for (let i = 0; i < children.length; i++) {
* print(children[i].getContent());
* }
* }
*
* // Sketch prints:
* // "Goat"
* // "Zebra"
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* let firstChild = xml.getChild('animal');
* print(firstChild.getAttributeCount());
* }
*
* // Sketch prints:
* // 2
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* let firstChild = xml.getChild('animal');
* print(firstChild.listAttributes());
* }
*
* // Sketch prints:
* // ["id", "species"]
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* let firstChild = xml.getChild('animal');
* print(firstChild.hasAttribute('species'));
* print(firstChild.hasAttribute('color'));
* }
*
* // Sketch prints:
* // true
* // false
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* let firstChild = xml.getChild('animal');
* print(firstChild.getNum('id'));
* }
*
* // Sketch prints:
* // 0
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* let firstChild = xml.getChild('animal');
* print(firstChild.getString('species'));
* }
*
* // Sketch prints:
* // "Capra hircus"
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* let firstChild = xml.getChild('animal');
* print(firstChild.getString('species'));
* firstChild.setAttribute('species', 'Jamides zebra');
* print(firstChild.getString('species'));
* }
*
* // Sketch prints:
* // "Capra hircus"
* // "Jamides zebra"
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* let firstChild = xml.getChild('animal');
* print(firstChild.getContent());
* }
*
* // Sketch prints:
* // "Goat"
*
* // The following short XML file called "mammals.xml" is parsed
* // in the code below.
* //
* //
* // <mammals>
* // <animal id="0" species="Capra hircus">Goat</animal>
* // <animal id="1" species="Panthera pardus">Leopard</animal>
* // <animal id="2" species="Equus zebra">Zebra</animal>
* // </mammals>
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* let firstChild = xml.getChild('animal');
* print(firstChild.getContent());
* firstChild.setContent('Mountain Goat');
* print(firstChild.getContent());
* }
*
* // Sketch prints:
* // "Goat"
* // "Mountain Goat"
*
* let xml;
*
* function preload() {
* xml = loadXML('assets/mammals.xml');
* }
*
* function setup() {
* print(xml.serialize());
* }
*
* // Sketch prints:
* //
* // Goat
* // Leopard
* // Zebra
* //
*
* function draw() {
* // Invert the y-axis.
* scale(1, -1);
* translate(0, -height);
*
* let centerX = width / 2;
* let x = frameCount;
* let y = abs(x - centerX);
* point(x, y);
*
* describe('A series of black dots that form a "V" shape.');
* }
*
*
* // Set the range for RGB values from 0 to 1.
* colorMode(RGB, 1);
* noStroke();
*
* let r = 0.3;
* fill(r, 0, 0);
* rect(0, 0, width / 2, height);
*
* // Round r up to 1.
* r = ceil(r);
* fill(r, 0, 0);
* rect(width / 2, 0, width / 2, height);
*
* describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.');
*
*
* function draw() {
* background(200);
*
* let x = constrain(mouseX, 33, 67);
* let y = 50;
*
* strokeWeight(5);
* point(x, y);
*
* describe('A black dot drawn on a gray square follows the mouse from left to right. Its movement is constrained to the middle third of the square.');
* }
*
*
* function draw() {
* background(200);
*
* // Set boundaries and draw them.
* let leftWall = width * 0.25;
* let rightWall = width * 0.75;
* line(leftWall, 0, leftWall, height);
* line(rightWall, 0, rightWall, height);
*
* // Draw a circle that follows the mouse freely.
* fill(255);
* circle(mouseX, height / 3, 9);
*
* // Draw a circle that's constrained.
* let xc = constrain(mouseX, leftWall, rightWall);
* fill(0);
* circle(xc, 2 * height / 3, 9);
*
* describe('Two vertical lines. Two circles move horizontally with the mouse. One circle stops at the vertical lines.');
* }
*
*
* let x1 = 10;
* let y1 = 50;
* let x2 = 90;
* let y2 = 50;
*
* line(x1, y1, x2, y2);
* strokeWeight(5);
* point(x1, y1);
* point(x2, y2);
*
* let d = dist(x1, y1, x2, y2);
* text(d, 43, 40);
*
* describe('Two dots connected by a horizontal line. The number 80 is written above the center of the line.');
*
*
* function draw() {
* // Invert the y-axis.
* scale(1, -1);
* translate(0, -height);
*
* let x = frameCount;
* let y = 0.005 * exp(x * 0.1);
* point(x, y);
*
* describe('A series of black dots that grow exponentially from left to right.');
* }
*
*
* // Set the range for RGB values from 0 to 1.
* colorMode(RGB, 1);
* noStroke();
*
* let r = 0.8;
* fill(r, 0, 0);
* rect(0, 0, width / 2, height);
*
* // Round r down to 0.
* r = floor(r);
* fill(r, 0, 0);
* rect(width / 2, 0, width / 2, height);
*
* describe('Two rectangles. The one on the left is bright red and the one on the right is black.');
*
*
* let a = 20;
* let b = 80;
* let c = lerp(a, b, 0.2);
* let d = lerp(a, b, 0.5);
* let e = lerp(a, b, 0.8);
*
* let y = 50;
*
* strokeWeight(5);
*
* // Draw the original points in black.
* stroke(0);
* point(a, y);
* point(b, y);
*
* // Draw the lerped points in gray.
* stroke(100);
* point(c, y);
* point(d, y);
* point(e, y);
*
* describe('Five points in a horizontal line. The outer points are black and the inner points are gray.');
*
*
* function draw() {
* // Invert the y-axis.
* scale(1, -1);
* translate(0, -height);
*
* let x = frameCount;
* let y = 15 * log(x);
* point(x, y);
*
* describe('A series of black dots that get higher slowly from left to right.');
* }
*
*
* let x = 30;
* let y = 40;
* let m = mag(x, y);
*
* line(0, 0, x, y);
* text(m, x, y);
*
* describe('A diagonal line is drawn from the top left of the canvas. The number 50 is written at the end of the line.');
*
*
* let n = map(7, 0, 10, 0, 100);
* text(n, 50, 50);
*
* describe('The number 70 written in the middle of a gray square.');
*
*
* let x = map(2, 0, 10, 0, width);
* circle(x, 50, 10);
*
* describe('A white circle drawn on the left side of a gray square.');
*
*
* function draw() {
* background(200);
*
* let c = map(mouseX, 0, width, 0, 255);
* fill(c);
* circle(50, 50, 20);
*
* describe('A circle changes color from black to white as the mouse moves from left to right.');
* }
*
*
* let m = max(10, 20);
* text(m, 50, 50);
*
* describe('The number 20 written in the middle of a gray square.');
*
*
* let m = max([10, 20]);
* text(m, 50, 50);
*
* describe('The number 20 written in the middle of a gray square.');
*
*
* let numbers = [2, 1, 5, 4, 8, 9];
*
* // Draw all of the numbers in the array.
* noStroke();
* let spacing = 15;
* numbers.forEach((n, index) => {
* let x = index * spacing;
* let y = 25;
* text(n, x, y);
* });
*
* // Draw the maximum value in the array.
* let m = max(numbers);
* let maxX = 33;
* let maxY = 80;
*
* textSize(32);
* text(m, maxX, maxY);
*
* describe('The numbers 2 1 5 4 8 9 are written in small text at the top of a gray square. The number 9 is written in large text at the center of the square.');
*
*
* let m = min(10, 20);
* text(m, 50, 50);
*
* describe('The number 10 written in the middle of a gray square.');
*
*
* let m = min([10, 20]);
* text(m, 50, 50);
*
* describe('The number 10 written in the middle of a gray square.');
*
*
* let numbers = [2, 1, 5, 4, 8, 9];
*
* // Draw all of the numbers in the array.
* noStroke();
* let spacing = 15;
* numbers.forEach((n, index) => {
* let x = index * spacing;
* let y = 25;
* text(n, x, y);
* });
*
* // Draw the minimum value in the array.
* let m = min(numbers);
* let minX = 33;
* let minY = 80;
*
* textSize(32);
* text(m, minX, minY);
*
* describe('The numbers 2 1 5 4 8 9 are written in small text at the top of a gray square. The number 1 is written in large text at the center of the square.');
*
*
* function draw() {
* // Set the range for RGB values from 0 to 1.
* colorMode(RGB, 1);
*
* let r = norm(mouseX, 0, width);
* background(r, 0, 0);
*
* describe('A square changes color from black to red as the mouse moves from left to right.');
* }
*
*
* let base = 3;
*
* let d = pow(base, 1);
* circle(10, 10, d);
*
* d = pow(base, 2);
* circle(20, 20, d);
*
* d = pow(base, 3);
* circle(40, 40, d);
*
* d = pow(base, 4);
* circle(80, 80, d);
*
* describe('A series of circles that grow exponentially from top left to bottom right.');
*
*
* let x = round(3.7);
* text(x, width / 2, height / 2);
*
* describe('The number 4 written in middle of canvas.');
*
*
* let x = round(12.782383, 2);
* text(x, width / 2, height / 2);
*
* describe('The number 12.78 written in middle of canvas.');
*
*
* function draw() {
* // Invert the y-axis.
* scale(1, -1);
* translate(0, -height);
*
* let x = frameCount;
* let y = 0.01 * sq(x);
* point(x, y);
*
* describe('A series of black dots that get higher quickly from left to right.');
* }
*
*
* function draw() {
* // Invert the y-axis.
* scale(1, -1);
* translate(0, -height);
*
* let x = frameCount;
* let y = 5 * sqrt(x);
* point(x, y);
*
* describe('A series of black dots that get higher slowly from left to right.');
* }
*
*
* let n = 56.78;
* text(n, 20, 33);
* let f = fract(n);
* text(f, 20, 66);
*
* describe('The number 56.78 written above the number 0.78.');
*
*
* let p1 = createVector(25, 25);
* let p2 = createVector(50, 50);
* let p3 = createVector(75, 75);
*
* strokeWeight(5);
* point(p1);
* point(p2);
* point(p3);
*
* describe('Three black dots form a diagonal line from top left to bottom right.');
*
*
* let pos;
* let vel;
*
* function setup() {
* createCanvas(100, 100);
* pos = createVector(width / 2, height);
* vel = createVector(0, -1);
* }
*
* function draw() {
* background(200);
*
* pos.add(vel);
*
* if (pos.y < 0) {
* pos.y = height;
* }
*
* strokeWeight(5);
* point(pos);
*
* describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');
* }
*
*
* function draw() {
* background(200);
*
* let x = 100 * noise(0.005 * frameCount);
* let y = 100 * noise(0.005 * frameCount + 10000);
*
* strokeWeight(5);
* point(x, y);
*
* describe('A black dot moves randomly on a gray square.');
* }
*
*
* function draw() {
* background(200);
*
* let noiseLevel = 100;
* let noiseScale = 0.005;
* // Scale input coordinate.
* let nt = noiseScale * frameCount;
* // Compute noise value.
* let x = noiseLevel * noise(nt);
* let y = noiseLevel * noise(nt + 10000);
* // Render.
* strokeWeight(5);
* point(x, y);
*
* describe('A black dot moves randomly on a gray square.');
* }
*
*
* function draw() {
* let noiseLevel = 100;
* let noiseScale = 0.02;
* // Scale input coordinate.
* let x = frameCount;
* let nx = noiseScale * x;
* // Compute noise value.
* let y = noiseLevel * noise(nx);
* // Render.
* line(x, 0, x, y);
*
* describe('A hilly terrain drawn in gray against a black sky.');
* }
*
*
* function draw() {
* background(200);
*
* let noiseLevel = 100;
* let noiseScale = 0.002;
* for (let x = 0; x < width; x += 1) {
* // Scale input coordinates.
* let nx = noiseScale * x;
* let nt = noiseScale * frameCount;
* // Compute noise value.
* let y = noiseLevel * noise(nx, nt);
* // Render.
* line(x, 0, x, y);
* }
*
* describe('A calm sea drawn in gray against a black sky.');
* }
*
*
* let noiseLevel = 255;
* let noiseScale = 0.01;
* for (let y = 0; y < height; y += 1) {
* for (let x = 0; x < width; x += 1) {
* // Scale input coordinates.
* let nx = noiseScale * x;
* let ny = noiseScale * y;
* // Compute noise value.
* let c = noiseLevel * noise(nx, ny);
* // Render.
* stroke(c);
* point(x, y);
* }
* }
*
* describe('A gray cloudy pattern.');
*
*
* function draw() {
* let noiseLevel = 255;
* let noiseScale = 0.009;
* for (let y = 0; y < height; y += 1) {
* for (let x = 0; x < width; x += 1) {
* // Scale input coordinates.
* let nx = noiseScale * x;
* let ny = noiseScale * y;
* let nt = noiseScale * frameCount;
* // Compute noise value.
* let c = noiseLevel * noise(nx, ny, nt);
* // Render.
* stroke(c);
* point(x, y);
* }
* }
*
* describe('A gray cloudy pattern that changes.');
* }
*
*
* let noiseLevel = 255;
* let noiseScale = 0.02;
* for (let y = 0; y < height; y += 1) {
* for (let x = 0; x < width / 2; x += 1) {
* // Scale input coordinates.
* let nx = noiseScale * x;
* let ny = noiseScale * y;
*
* // Compute noise value.
* noiseDetail(6, 0.25);
* let c = noiseLevel * noise(nx, ny);
* // Render left side.
* stroke(c);
* point(x, y);
*
* // Compute noise value.
* noiseDetail(4, 0.5);
* c = noiseLevel * noise(nx, ny);
* // Render right side.
* stroke(c);
* point(x + width / 2, y);
* }
* }
*
* describe('Two gray cloudy patterns. The pattern on the right is cloudier than the pattern on the left.');
*
*
* function setup() {
* noiseSeed(99);
* background(255);
* }
*
* function draw() {
* let noiseLevel = 100;
* let noiseScale = 0.005;
* // Scale input coordinate.
* let nt = noiseScale * frameCount;
* // Compute noise value.
* let x = noiseLevel * noise(nt);
* // Render.
* line(x, 0, x, height);
*
* describe('A black rectangle that grows randomly, first to the right and then to the left.');
* }
*
*
* let p1 = createVector(25, 25);
* let p2 = createVector(75, 75);
*
* strokeWeight(5);
* point(p1);
* point(p2.x, p2.y);
*
* describe('Two black dots on a gray square, one at the top left and the other at the bottom right.');
*
*
* let pos;
* let vel;
*
* function setup() {
* createCanvas(100, 100);
* pos = createVector(width / 2, height);
* vel = createVector(0, -1);
* }
*
* function draw() {
* background(200);
*
* pos.add(vel);
*
* if (pos.y < 0) {
* pos.y = height;
* }
*
* strokeWeight(5);
* point(pos);
*
* describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');
* }
*
*
* function setup() {
* let v = createVector(20, 30);
* // Prints 'p5.Vector Object : [20, 30, 0]'.
* print(v.toString());
* }
*
*
* strokeWeight(5);
*
* // Top left.
* let pos = createVector(25, 25);
* point(pos);
*
* // Top right.
* pos.set(75, 25);
* point(pos);
*
* // Bottom right.
* let p2 = createVector(75, 75);
* pos.set(p2);
* point(pos);
*
* // Bottom left.
* let arr = [25, 75];
* pos.set(arr);
* point(pos);
*
* describe('Four black dots arranged in a square on a gray background.');
*
*
* let pos = createVector(50, 50);
* let pc = pos.copy();
*
* strokeWeight(5);
* point(pc);
*
* describe('A black point drawn in the middle of a gray square.');
*
*
* strokeWeight(5);
*
* // Top left.
* let pos = createVector(25, 25);
* point(pos);
*
* // Top right.
* pos.add(50, 0);
* point(pos);
*
* // Bottom right.
* let p2 = createVector(0, 50);
* pos.add(p2);
* point(pos);
*
* // Bottom left.
* let arr = [-50, 0];
* pos.add(arr);
* point(pos);
*
* describe('Four black dots arranged in a square on a gray background.');
*
*
* // Top left.
* let p1 = createVector(25, 25);
*
* // Center.
* let p2 = createVector(50, 50);
*
* // Bottom right.
* let p3 = p5.Vector.add(p1, p2);
*
* strokeWeight(5);
* point(p1);
* point(p2);
* point(p3);
*
* describe('Three black dots in a diagonal line from top left to bottom right.');
*
*
* function draw() {
* background(200);
*
* let origin = createVector(0, 0);
* let v1 = createVector(50, 50);
* drawArrow(origin, v1, 'red');
*
* let v2 = createVector(-30, 20);
* drawArrow(v1, v2, 'blue');
*
* let v3 = p5.Vector.add(v1, v2);
* drawArrow(origin, v3, 'purple');
*
* describe('Three arrows drawn on a gray square. A red arrow extends from the top left corner to the center. A blue arrow extends from the tip of the red arrow. A purple arrow extends from the origin to the tip of the blue arrow.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let v = createVector(3, 4, 5);
* v.rem(2, 3, 4);
* // Prints 'p5.Vector Object : [1, 1, 1]'.
* print(v.toString());
*
*
* let v1 = createVector(3, 4, 5);
* let v2 = createVector(2, 3, 4);
* v1.rem(v2);
*
* // Prints 'p5.Vector Object : [1, 1, 1]'.
* print(v1.toString());
*
*
* let v = createVector(3, 4, 5);
* let arr = [2, 3, 4];
* v.rem(arr);
*
* // Prints 'p5.Vector Object : [1, 1, 1]'.
* print(v.toString());
*
*
* let v1 = createVector(3, 4, 5);
* let v2 = createVector(2, 3, 4);
* let v3 = p5.Vector.rem(v1, v2);
*
* // Prints 'p5.Vector Object : [1, 1, 1]'.
* print(v3.toString());
*
*
* strokeWeight(5);
*
* // Bottom right.
* let pos = createVector(75, 75);
* point(pos);
*
* // Top right.
* pos.sub(0, 50);
* point(pos);
*
* // Top left.
* let p2 = createVector(50, 0);
* pos.sub(p2);
* point(pos);
*
* // Bottom left.
* let arr = [0, -50];
* pos.sub(arr);
* point(pos);
*
* describe('Four black dots arranged in a square on a gray background.');
*
*
* // Bottom right.
* let p1 = createVector(75, 75);
*
* // Center.
* let p2 = createVector(50, 50);
*
* // Top left.
* let p3 = p5.Vector.sub(p1, p2);
*
* strokeWeight(5);
* point(p1);
* point(p2);
* point(p3);
*
* describe('Three black dots in a diagonal line from top left to bottom right.');
*
*
* function draw() {
* background(200);
*
* let origin = createVector(0, 0);
* let v1 = createVector(50, 50);
* drawArrow(origin, v1, 'red');
*
* let v2 = createVector(20, 70);
* drawArrow(origin, v2, 'blue');
*
* let v3 = p5.Vector.sub(v2, v1);
* drawArrow(v1, v3, 'purple');
*
* describe('Three arrows drawn on a gray square. A red and a blue arrow extend from the top left. A purple arrow extends from the tip of the red arrow to the tip of the blue arrow.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* strokeWeight(5);
*
* let p = createVector(25, 25);
* point(p);
*
* p.mult(2);
* point(p);
*
* describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');
*
*
* strokeWeight(5);
*
* let p = createVector(25, 25);
* point(p);
*
* p.mult(2, 3);
* point(p);
*
* describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
*
*
* strokeWeight(5);
*
* let p = createVector(25, 25);
* point(p);
*
* let arr = [2, 3];
* p.mult(arr);
* point(p);
*
* describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
*
*
* strokeWeight(5);
*
* let p = createVector(25, 25);
* point(p);
*
* let p2 = createVector(2, 3);
* p.mult(p2);
* point(p);
*
* describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
*
*
* strokeWeight(5);
*
* let p = createVector(25, 25);
* point(p);
*
* let p2 = createVector(2, 3);
* let p3 = p5.Vector.mult(p, p2);
* point(p3);
*
* describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
*
*
* function draw() {
* background(200);
*
* let origin = createVector(0, 0);
* let v1 = createVector(25, 25);
* drawArrow(origin, v1, 'red');
*
* let v2 = p5.Vector.mult(v1, 2);
* drawArrow(origin, v2, 'blue');
*
* describe('Two arrows extending from the top left corner. The blue arrow is twice the length of the red arrow.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* strokeWeight(5);
*
* let p = createVector(50, 50);
* point(p);
*
* p.div(2);
* point(p);
*
* describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');
*
*
* strokeWeight(5);
*
* let p = createVector(50, 75);
* point(p);
*
* p.div(2, 3);
* point(p);
*
* describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
*
*
* strokeWeight(5);
*
* let p = createVector(50, 75);
* point(p);
*
* let arr = [2, 3];
* p.div(arr);
* point(p);
*
* describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
*
*
* strokeWeight(5);
*
* let p = createVector(50, 75);
* point(p);
*
* let p2 = createVector(2, 3);
* p.div(p2);
* point(p);
*
* describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
*
*
* strokeWeight(5);
*
* let p = createVector(50, 75);
* point(p);
*
* let p2 = createVector(2, 3);
* let p3 = p5.Vector.div(p, p2);
* point(p3);
*
* describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
*
*
* function draw() {
* background(200);
*
* let origin = createVector(0, 0);
* let v1 = createVector(50, 50);
* drawArrow(origin, v1, 'red');
*
* let v2 = p5.Vector.div(v1, 2);
* drawArrow(origin, v2, 'blue');
*
* describe('Two arrows extending from the top left corner. The blue arrow is half the length of the red arrow.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let p = createVector(30, 40);
* line(0, 0, p.x, p.y);
*
* let m = p.mag();
* text(m, p.x, p.y);
*
* describe('A diagonal black line extends from the top left corner of a gray square. The number 50 is written at the end of the line.');
*
*
* let p = createVector(30, 40);
* line(0, 0, p.x, p.y);
*
* let m = p.magSq();
* text(m, p.x, p.y);
*
* describe('A diagonal black line extends from the top left corner of a gray square. The number 2500 is written at the end of the line.');
*
*
* let v1 = createVector(3, 4);
* let v2 = createVector(3, 0);
* let dp = v1.dot(v2);
* // Prints "9" to the console.
* print(dp);
*
*
* let v1 = createVector(1, 0);
* let v2 = createVector(0, 1);
* let dp = p5.Vector.dot(v1, v2);
* // Prints "0" to the console.
* print(dp);
*
*
* function draw() {
* background(200);
*
* let v0 = createVector(width / 2, height / 2);
* let v1 = createVector(30, 0);
* drawArrow(v0, v1, 'black');
*
* let v2 = createVector(mouseX - width / 2, mouseY - height / 2);
* drawArrow(v0, v2, 'red');
*
* let dp = v2.dot(v1);
* text(`v2 • v1 = ${dp}`, 15, 20);
*
* describe('Two arrows drawn on a gray square. A black arrow points to the right and a red arrow follows the mouse. The text "v1 • v2 = something" changes as the mouse moves.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let v1 = createVector(1, 0);
* let v2 = createVector(3, 4);
* let cp = v1.cross(v2);
* // Prints "p5.Vector Object : [0, 0, 4]" to the console.
* print(cp.toString());
*
*
* let v1 = createVector(1, 0);
* let v2 = createVector(3, 4);
* let cp = p5.Vector.cross(v1, v2);
* // Prints "p5.Vector Object : [0, 0, 4]" to the console.
* print(cp.toString());
*
*
* let v1 = createVector(1, 0);
* let v2 = createVector(0, 1);
* let d = v1.dist(v2);
* // Prints "1.414..." to the console.
* print(d);
*
*
* let v1 = createVector(1, 0);
* let v2 = createVector(0, 1);
* let d = p5.Vector.dist(v1, v2);
* // Prints "1.414..." to the console.
* print(d);
*
*
* function draw() {
* background(200);
*
* let origin = createVector(0, 0);
* let v1 = createVector(50, 50);
* drawArrow(origin, v1, 'red');
*
* let v2 = createVector(20, 70);
* drawArrow(origin, v2, 'blue');
*
* let v3 = p5.Vector.sub(v2, v1);
* drawArrow(v1, v3, 'purple');
*
* let m = floor(v3.mag());
* text(m, 50, 75);
*
* describe('Three arrows drawn on a gray square. A red and a blue arrow extend from the top left. A purple arrow extends from the tip of the red arrow to the tip of the blue arrow. The number 36 is written in black near the purple arrow.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let v = createVector(10, 20, 2);
* v.normalize();
* // Prints "p5.Vector Object : [0.445..., 0.890..., 0.089...]" to the console.
* print(v.toString());
*
*
* let v0 = createVector(10, 20, 2);
* let v1 = p5.Vector.normalize(v0);
* // Prints "p5.Vector Object : [10, 20, 2]" to the console.
* print(v0.toString());
* // Prints "p5.Vector Object : [0.445..., 0.890..., 0.089...]" to the console.
* print(v1.toString());
*
*
* function draw() {
* background(240);
*
* let v0 = createVector(50, 50);
* let v1 = createVector(mouseX - 50, mouseY - 50);
*
* let r = 25;
* drawArrow(v0, v1, 'red');
* v1.normalize();
* drawArrow(v0, v1.mult(r), 'blue');
*
* noFill();
* circle(50, 50, r * 2);
*
* describe("A red and blue arrow extend from the center of a circle. Both arrows follow the mouse, but the blue arrow's length is fixed to the circle's radius.");
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let v = createVector(10, 20, 2);
* v.limit(5);
* // Prints "p5.Vector Object : [2.227..., 4.454..., 0.445...]" to the console.
* print(v.toString());
*
*
* let v0 = createVector(10, 20, 2);
* let v1 = p5.Vector.limit(v0, 5);
* // Prints "p5.Vector Object : [2.227..., 4.454..., 0.445...]" to the console.
* print(v1.toString());
*
*
* function draw() {
* background(240);
*
* let v0 = createVector(50, 50);
* let v1 = createVector(mouseX - 50, mouseY - 50);
*
* let r = 25;
* drawArrow(v0, v1, 'red');
* drawArrow(v0, v1.limit(r), 'blue');
*
* noFill();
* circle(50, 50, r * 2);
*
* describe("A red and blue arrow extend from the center of a circle. Both arrows follow the mouse, but the blue arrow never crosses the circle's edge.");
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let v = createVector(3, 4, 0);
* // Prints "5" to the console.
* print(v.mag());
*
* v.setMag(10);
* // Prints "p5.Vector Object : [6, 8, 0]" to the console.
* print(v.toString());
*
*
* let v0 = createVector(3, 4, 0);
* let v1 = p5.Vector.setMag(v0, 10);
* // Prints "5" to the console.
* print(v0.mag());
* // Prints "p5.Vector Object : [6, 8, 0]" to the console.
* print(v1.toString());
*
*
* function draw() {
* background(240);
*
* let origin = createVector(0, 0);
* let v = createVector(50, 50);
*
* drawArrow(origin, v, 'red');
*
* v.setMag(30);
* drawArrow(origin, v, 'blue');
*
* describe('Two arrows extend from the top left corner of a square toward its center. The red arrow reaches the center and the blue arrow only extends part of the way.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let v = createVector(1, 1);
* // Prints "0.785..." to the console.
* print(v.heading());
*
* angleMode(DEGREES);
* // Prints "45" to the console.
* print(v.heading());
*
*
* let v = createVector(1, 1);
* // Prints "0.785..." to the console.
* print(p5.Vector.heading(v));
*
* angleMode(DEGREES);
* // Prints "45" to the console.
* print(p5.Vector.heading(v));
*
*
* function draw() {
* background(200);
*
* let origin = createVector(0, 0);
* let v = createVector(50, 50);
*
* drawArrow(origin, v, 'black');
*
* angleMode(RADIANS);
* let h = round(v.heading(), 2);
* text(`Radians: ${h}`, 20, 70);
* angleMode(DEGREES);
* h = v.heading();
* text(`Degrees: ${h}`, 20, 85);
*
* describe('A black arrow extends from the top left of a square to its center. The text "Radians: 0.79" and "Degrees: 45" is written near the tip of the arrow.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let v = createVector(0, 1);
* // Prints "1.570..." to the console.
* print(v.heading());
*
* v.setHeading(PI);
* // Prints "3.141..." to the console.
* print(v.heading());
*
*
* angleMode(DEGREES);
* let v = createVector(0, 1);
* // Prints "90" to the console.
* print(v.heading());
*
* v.setHeading(180);
* // Prints "180" to the console.
* print(v.heading());
*
*
* function draw() {
* background(200);
*
* let v0 = createVector(50, 50);
* let v1 = createVector(30, 0);
*
* drawArrow(v0, v1, 'red');
*
* v1.setHeading(HALF_PI);
* drawArrow(v0, v1, 'blue');
*
* describe('Two arrows extend from the center of a gray square. The red arrow points to the right and the blue arrow points down.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let v = createVector(1, 0);
* // Prints "p5.Vector Object : [1, 0, 0]" to the console.
* print(v.toString());
* v.rotate(HALF_PI);
* // Prints "p5.Vector Object : [0, 1, 0]" to the console.
* print(v.toString());
*
*
* angleMode(DEGREES);
* let v = createVector(1, 0);
* // Prints "p5.Vector Object : [1, 0, 0]" to the console.
* print(v.toString());
* v.rotate(90);
* // Prints "p5.Vector Object : [0, 1, 0]" to the console.
* print(v.toString());
*
*
* let v0 = createVector(1, 0);
* let v1 = p5.Vector.rotate(v0, HALF_PI);
* // Prints "p5.Vector Object : [1, 0, 0]" to the console.
* print(v0.toString());
* // Prints "p5.Vector Object : [0, 1, 0]" to the console.
* print(v1.toString());
*
*
* angleMode(DEGREES);
* let v0 = createVector(1, 0);
* let v1 = p5.Vector.rotate(v0, 90);
* // Prints "p5.Vector Object : [1, 0, 0]" to the console.
* print(v0.toString());
* // Prints "p5.Vector Object : [0, 1, 0]" to the console.
* print(v1.toString());
*
*
* let v0;
* let v1;
*
* function setup() {
* v0 = createVector(50, 50);
* v1 = createVector(30, 0);
* }
*
* function draw() {
* background(240);
*
* v1.rotate(0.01);
*
* drawArrow(v0, v1, 'black');
*
* describe('A black arrow extends from the center of a gray square. The arrow rotates clockwise.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let v0 = createVector(1, 0);
* let v1 = createVector(0, 1);
* // Prints "1.570..." to the console.
* print(v0.angleBetween(v1));
* // Prints "-1.570..." to the console.
* print(v1.angleBetween(v0));
*
*
* angleMode(DEGREES);
* let v0 = createVector(1, 0);
* let v1 = createVector(0, 1);
* // Prints "90" to the console.
* print(v0.angleBetween(v1));
* // Prints "-90" to the console.
* print(v1.angleBetween(v0));
*
*
* let v0 = createVector(1, 0);
* let v1 = createVector(0, 1);
* // Prints "1.570..." to the console.
* print(p5.Vector.angleBetween(v0, v1));
* // Prints "-1.570..." to the console.
* print(p5.Vector.angleBetween(v1, v0));
*
*
* angleMode(DEGREES);
* let v0 = createVector(1, 0);
* let v1 = createVector(0, 1);
* // Prints "90" to the console.
* print(p5.Vector.angleBetween(v0, v1));
* // Prints "-90" to the console.
* print(p5.Vector.angleBetween(v1, v0));
*
*
* function draw() {
* background(200);
*
* let v0 = createVector(50, 50);
* let v1 = createVector(30, 0);
* let v2 = createVector(0, 30);
*
* drawArrow(v0, v1, 'red');
* drawArrow(v0, v2, 'blue');
*
* angleMode(RADIANS);
* let angle = round(v1.angleBetween(v2), 2);
* text(`Radians: ${angle}`, 20, 20);
* angleMode(DEGREES);
* angle = round(v1.angleBetween(v2), 2);
* text(`Degrees: ${angle}`, 20, 35);
*
* describe('Two arrows extend from the center of a gray square. A red arrow points to the right and a blue arrow points down. The text "Radians: 1.57" and "Degrees: 90" is written above the arrows.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let v0 = createVector(1, 1, 1);
* let v1 = createVector(3, 3, 3);
* v0.lerp(v1, 0.5);
* // Prints "p5.Vector Object : [2, 2, 2]" to the console.
* print(v0.toString());
*
*
* let v = createVector(1, 1, 1);
* v.lerp(3, 3, 3, 0.5);
* // Prints "p5.Vector Object : [2, 2, 2]" to the console.
* print(v.toString());
*
*
* let v0 = createVector(1, 1, 1);
* let v1 = createVector(3, 3, 3);
* let v2 = p5.Vector.lerp(v0, v1, 0.5);
* // Prints "p5.Vector Object : [2, 2, 2]" to the console.
* print(v2.toString());
*
*
* function draw() {
* background(200);
*
* let v0 = createVector(50, 50);
* let v1 = createVector(30, 0);
* let v2 = createVector(0, 30);
* let v3 = p5.Vector.lerp(v1, v2, 0.5);
*
* drawArrow(v0, v1, 'red');
* drawArrow(v0, v2, 'blue');
* drawArrow(v0, v3, 'purple');
*
* describe('Three arrows extend from the center of a gray square. A red arrow points to the right, a blue arrow points down, and a purple arrow points to the bottom right.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let v0 = createVector(3, 0);
* // Prints "3" to the console.
* print(v0.mag());
* // Prints "0" to the console.
* print(v0.heading());
*
* let v1 = createVector(0, 1);
* // Prints "1" to the console.
* print(v1.mag());
* // Prints "1.570..." to the console.
* print(v1.heading());
*
* v0.slerp(v1, 0.5);
* // Prints "2" to the console.
* print(v0.mag());
* // Prints "0.785..." to the console.
* print(v0.heading());
*
*
* let v0 = createVector(3, 0);
* // Prints "3" to the console.
* print(v0.mag());
* // Prints "0" to the console.
* print(v0.heading());
*
* let v1 = createVector(0, 1);
* // Prints "1" to the console.
* print(v1.mag());
* // Prints "1.570..." to the console.
* print(v1.heading());
*
* let v3 = p5.Vector.slerp(v0, v1, 0.5);
* // Prints "2" to the console.
* print(v3.mag());
* // Prints "0.785..." to the console.
* print(v3.heading());
*
*
* function draw() {
* background(200);
*
* let v0 = createVector(50, 50);
* let v1 = createVector(20, 0);
* let v2 = createVector(-40, 0);
* let v3 = p5.Vector.slerp(v1, v2, 0.5);
*
* drawArrow(v0, v1, 'red');
* drawArrow(v0, v2, 'blue');
* drawArrow(v0, v3, 'purple');
*
* describe('Three arrows extend from the center of a gray square. A red arrow points to the right, a blue arrow points to the left, and a purple arrow points down.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let n = createVector(0, 1);
* let v = createVector(4, 6);
* v.reflect(n);
* // Prints "p5.Vector Object : [4, -6, 0]" to the console.
* print(v.toString());
*
*
* let n = createVector(0, 1);
* let v0 = createVector(4, 6);
* let v1 = p5.Vector.reflect(v0, n);
* // Prints "p5.Vector Object : [4, -6, 0]" to the console.
* print(v1.toString());
*
*
* function draw() {
* background(200);
*
* line(50, 0, 50, 100);
* let n = createVector(1, 0);
*
* let v0 = createVector(50, 50);
* let v1 = createVector(30, 40);
* let v2 = p5.Vector.reflect(v1, n);
*
* n.setMag(30);
* drawArrow(v0, n, 'black');
* drawArrow(v0, v1, 'red');
* drawArrow(v0, v2, 'blue');
*
* describe('Three arrows extend from the center of a gray square with a vertical line down its middle. A black arrow points to the right, a blue arrow points to the bottom left, and a red arrow points to the bottom right.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let v = createVector(20, 30);
* // Prints "[20, 30, 0]" to the console.
* print(v.array());
*
*
* let v0 = createVector(10, 20, 30);
* let v1 = createVector(10, 20, 30);
* let v2 = createVector(0, 0, 0);
*
* // Prints "true" to the console.
* print(v0.equals(v1));
* // Prints "false" to the console.
* print(v0.equals(v2));
*
*
* let v0 = createVector(5, 10, 20);
* let v1 = createVector(5, 10, 20);
* let v2 = createVector(13, 10, 19);
*
* // Prints "true" to the console.
* print(v0.equals(v1.x, v1.y, v1.z));
* // Prints "false" to the console.
* print(v0.equals(v2.x, v2.y, v2.z));
*
*
* let v0 = createVector(10, 20, 30);
* let v1 = createVector(10, 20, 30);
* let v2 = createVector(0, 0, 0);
*
* // Prints "true" to the console.
* print(p5.Vector.equals(v0, v1));
* // Prints "false" to the console.
* print(p5.Vector.equals(v0, v2));
*
*
* let v = p5.Vector.fromAngle(0);
* // Prints "p5.Vector Object : [1, 0, 0]" to the console.
* print(v.toString());
*
*
* function draw() {
* background(200);
*
* let v0 = createVector(50, 50);
* let v1 = p5.Vector.fromAngle(0, 30);
*
* drawArrow(v0, v1, 'black');
*
* describe('A black arrow extends from the center of a gray square. It points to the right.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let v = p5.Vector.fromAngles(0, 0);
* // Prints "p5.Vector Object : [0, -1, 0]" to the console.
* print(v.toString());
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(0);
*
* fill(255);
* noStroke();
*
* let theta = frameCount * 0.05;
* let phi = 0;
* let v = p5.Vector.fromAngles(theta, phi, 100);
* let c = color('deeppink');
* pointLight(c, v);
*
* sphere(35);
*
* describe('A light shines on a pink sphere as it orbits.');
* }
*
*
* let v = p5.Vector.random2D();
* // Prints "p5.Vector Object : [x, y, 0]" to the console
* // where x and y are small random numbers.
* print(v.toString());
*
*
* function draw() {
* background(200);
*
* frameRate(1);
*
* let v0 = createVector(50, 50);
* let v1 = p5.Vector.random2D();
* v1.mult(30);
* drawArrow(v0, v1, 'black');
*
* describe('A black arrow in extends from the center of a gray square. It changes direction once per second.');
* }
*
* function drawArrow(base, vec, myColor) {
* push();
* stroke(myColor);
* strokeWeight(3);
* fill(myColor);
* translate(base.x, base.y);
* line(0, 0, vec.x, vec.y);
* rotate(vec.heading());
* let arrowSize = 7;
* translate(vec.mag() - arrowSize, 0);
* triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
* pop();
* }
*
*
* let v = p5.Vector.random3D();
* // Prints "p5.Vector Object : [x, y, z]" to the console
* // where x, y, and z are small random numbers.
* print(v.toString());
*
*
* let x = random(width);
* let y = random(height);
* circle(x, y, 10);
*
* randomSeed(99);
* x = random(width);
* y = random(height);
* fill(0);
* circle(x, y, 10);
*
* describe('A white circle appears at a random position. A black circle appears at (27.4, 25.8).');
*
*
* let x = random(width);
* let y = random(height);
*
* strokeWeight(5);
* point(x, y);
*
* describe('A black dot appears in a random position on a gray square.');
*
*
* let animals = ['🦁', '🐯', '🐻'];
* let animal = random(animals);
* text(animal, 50, 50);
*
* describe('An animal face is displayed at random. Either a lion, tiger, or bear.');
*
*
* function draw() {
* background(200);
*
* frameRate(5);
* let x = random(width);
* let y = random(height);
*
* strokeWeight(5);
* point(x, y);
*
* describe('A black dot moves around randomly on a gray square.');
* }
*
*
* function draw() {
* background(200);
*
* frameRate(5);
* let x = random(45, 55);
* let y = random(45, 55);
*
* strokeWeight(5);
* point(x, y);
*
* describe('A black dot moves around randomly in the middle of a gray square.');
* }
*
*
* function draw() {
* noStroke();
* fill(0, 10);
*
* // Uniform distribution.
* let x = random(width);
* let y = 25;
* circle(x, y, 5);
*
* // Gaussian distribution with sd = 1.
* x = randomGaussian(50);
* y = 50;
* circle(x, y, 5);
*
* // Gaussian distribution with sd = 10.
* x = randomGaussian(50, 10);
* y = 75;
* circle(x, y, 5);
*
* describe('Three horizontal black lines are filled in randomly. The top line spans entire canvas. The middle line is very short. The bottom line spans two-thirds of the canvas.');
* }
*
*
* let a = PI;
* let c = cos(a);
* let ac = acos(c);
* text(`${round(a, 3)}`, 35, 25);
* text(`${round(c, 3)}`, 35, 50);
* text(`${round(ac, 3)}`, 35, 75);
*
* describe('The numbers 3.142, -1, and 3.142 written on separate rows.');
*
*
* let a = PI + QUARTER_PI;
* let c = cos(a);
* let ac = acos(c);
* text(`${round(a, 3)}`, 35, 25);
* text(`${round(c, 3)}`, 35, 50);
* text(`${round(ac, 3)}`, 35, 75);
*
* describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');
*
*
* let a = PI / 3;
* let s = sin(a);
* let as = asin(s);
* text(`${round(a, 3)}`, 35, 25);
* text(`${round(s, 3)}`, 35, 50);
* text(`${round(as, 3)}`, 35, 75);
*
* describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');
*
*
* let a = PI + PI / 3;
* let s = sin(a);
* let as = asin(s);
* text(`${round(a, 3)}`, 35, 25);
* text(`${round(s, 3)}`, 35, 50);
* text(`${round(as, 3)}`, 35, 75);
*
* describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');
*
*
* let a = PI / 3;
* let t = tan(a);
* let at = atan(t);
* text(`${round(a, 3)}`, 35, 25);
* text(`${round(t, 3)}`, 35, 50);
* text(`${round(at, 3)}`, 35, 75);
*
* describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');
*
*
* let a = PI + PI / 3;
* let t = tan(a);
* let at = atan(t);
* text(`${round(a, 3)}`, 35, 25);
* text(`${round(t, 3)}`, 35, 50);
* text(`${round(at, 3)}`, 35, 75);
*
* describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');
*
*
* function draw() {
* background(200);
* translate(width / 2, height / 2);
* let x = mouseX - width / 2;
* let y = mouseY - height / 2;
* let a = atan2(y, x);
* rotate(a);
* rect(-30, -5, 60, 10);
*
* describe('A rectangle at the center of the canvas rotates with mouse movements.');
* }
*
*
* function draw() {
* background(200);
*
* let t = frameCount;
* let x = 30 * cos(t * 0.05) + 50;
* let y = 50;
* line(50, y, x, y);
* circle(x, y, 20);
*
* describe('A white ball on a string oscillates left and right.');
* }
*
*
* function draw() {
* let x = frameCount;
* let y = 30 * cos(x * 0.1) + 50;
* point(x, y);
*
* describe('A series of black dots form a wave pattern.');
* }
*
*
* function draw() {
* let t = frameCount;
* let x = 30 * cos(t * 0.1) + 50;
* let y = 10 * sin(t * 0.2) + 50;
* point(x, y);
*
* describe('A series of black dots form an infinity symbol.');
* }
*
*
* function draw() {
* background(200);
*
* let t = frameCount;
* let x = 50;
* let y = 30 * sin(t * 0.05) + 50;
* line(x, 50, x, y);
* circle(x, y, 20);
*
* describe('A white ball on a string oscillates up and down.');
* }
*
*
* function draw() {
* let x = frameCount;
* let y = 30 * sin(x * 0.1) + 50;
* point(x, y);
*
* describe('A series of black dots form a wave pattern.');
* }
*
*
* function draw() {
* let t = frameCount;
* let x = 30 * cos(t * 0.1) + 50;
* let y = 10 * sin(t * 0.2) + 50;
* point(x, y);
*
* describe('A series of black dots form an infinity symbol.');
* }
*
*
* function draw() {
* let x = frameCount;
* let y = 5 * tan(x * 0.1) + 50;
* point(x, y);
*
* describe('A series of identical curves drawn with black dots. Each curve starts from the top of the canvas, continues down at a slight angle, flattens out at the middle of the canvas, then continues to the bottom.');
* }
*
*
* let rad = QUARTER_PI;
* let deg = degrees(rad);
* text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);
*
* describe('The text "0.79 rad = 45˚".');
*
*
* let deg = 45;
* let rad = radians(deg);
* text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);
*
* describe('The text "45˚ = 0.785 rad".');
*
*
* let r = 40;
* push();
* rotate(PI / 6);
* line(0, 0, r, 0);
* text('0.524 rad', r, 0);
* pop();
*
* angleMode(DEGREES);
* push();
* rotate(60);
* line(0, 0, r, 0);
* text('60˚', r, 0);
* pop();
*
* describe('Two diagonal lines radiating from the top left corner of a square. The lines are oriented 30 degrees from the edges of the square and 30 degrees apart from each other.');
*
*
* strokeWeight(0.5);
* line(50, 0, 50, 100);
*
* textSize(16);
* textAlign(RIGHT);
* text('ABCD', 50, 30);
* textAlign(CENTER);
* text('EFGH', 50, 50);
* textAlign(LEFT);
* text('IJKL', 50, 70);
*
* describe('The letters ABCD displayed at top-left, EFGH at center, and IJKL at bottom-right. A vertical line divides the canvas in half.');
*
*
* strokeWeight(0.5);
*
* line(0, 12, width, 12);
* textAlign(CENTER, TOP);
* text('TOP', 50, 12);
*
* line(0, 37, width, 37);
* textAlign(CENTER, CENTER);
* text('CENTER', 50, 37);
*
* line(0, 62, width, 62);
* textAlign(CENTER, BASELINE);
* text('BASELINE', 50, 62);
*
* line(0, 97, width, 97);
* textAlign(CENTER, BOTTOM);
* text('BOTTOM', 50, 97);
*
* describe('The words "TOP", "CENTER", "BASELINE", and "BOTTOM" each drawn relative to a horizontal line. Their positions demonstrate different vertical alignments.');
*
*
* // "\n" starts a new line of text.
* let lines = 'one\ntwo';
*
* text(lines, 10, 25);
*
* textLeading(30);
* text(lines, 70, 25);
*
* describe('The words "one" and "two" written on separate lines twice. The words on the left have less vertical spacing than the words on the right.');
*
*
* textSize(12);
* text('Font Size 12', 10, 30);
* textSize(14);
* text('Font Size 14', 10, 60);
* textSize(16);
* text('Font Size 16', 10, 90);
*
* describe('The text "Font Size 12" drawn small, "Font Size 14" drawn medium, and "Font Size 16" drawn large.');
*
*
* textSize(12);
* textAlign(CENTER);
*
* textStyle(NORMAL);
* text('Normal', 50, 15);
* textStyle(ITALIC);
* text('Italic', 50, 40);
* textStyle(BOLD);
* text('Bold', 50, 65);
* textStyle(BOLDITALIC);
* text('Bold Italic', 50, 90);
*
* describe('The words "Normal" displayed normally, "Italic" in italic, "Bold" in bold, and "Bold Italic" in bold italics.');
*
*
* function setup() {
* background(200);
*
* textSize(28);
* strokeWeight(0.5);
* let s = 'yoyo';
* let w = textWidth(s);
* text(s, 22, 55);
* line(22, 55, 22 + w, 55);
*
* describe('The word "yoyo" underlined.');
* }
*
*
* function setup() {
* background(200);
*
* textSize(28);
* strokeWeight(0.5);
* // "\n" starts a new line.
* let s = 'yo\nyo';
* let w = textWidth(s);
* text(s, 22, 55);
* line(22, 55, 22 + w, 55);
*
* describe('The word "yo" written twice, one copy beneath the other. The words are divided by a horizontal line.');
* }
*
*
* let font;
*
* function preload() {
* font = loadFont('assets/inconsolata.otf');
* }
*
* function setup() {
* background(200);
* textFont(font);
*
* // Different for each font.
* let fontScale = 0.8;
*
* let baseY = 75;
* strokeWeight(0.5);
*
* // Draw small text.
* textSize(24);
* text('dp', 0, baseY);
* // Draw baseline and ascent.
* let a = textAscent() * fontScale;
* line(0, baseY, 23, baseY);
* line(23, baseY - a, 23, baseY);
*
* // Draw large text.
* textSize(48);
* text('dp', 45, baseY);
* // Draw baseline and ascent.
* a = textAscent() * fontScale;
* line(45, baseY, 91, baseY);
* line(91, baseY - a, 91, baseY);
*
* describe('The letters "dp" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends upward from each baseline to the top of the "d".');
* }
*
*
* let font;
*
* function preload() {
* font = loadFont('assets/inconsolata.otf');
* }
*
* function setup() {
* background(200);
* textFont(font);
*
* // Different for each font.
* let fontScale = 0.9;
*
* let baseY = 75;
* strokeWeight(0.5);
*
* // Draw small text.
* textSize(24);
* text('dp', 0, baseY);
* // Draw baseline and descent.
* let d = textDescent() * fontScale;
* line(0, baseY, 23, baseY);
* line(23, baseY, 23, baseY + d);
*
* // Draw large text.
* textSize(48);
* text('dp', 45, baseY);
* // Draw baseline and descent.
* d = textDescent() * fontScale;
* line(45, baseY, 91, baseY);
* line(91, baseY, 91, baseY + d);
*
* describe('The letters "dp" written twice in different sizes. Each version has a horizontal baseline. A vertical line extends downward from each baseline to the bottom of the "p".');
* }
*
*
* textSize(20);
* textWrap(WORD);
* text('Have a wonderful day', 0, 10, 100);
*
*
* textSize(20);
* textWrap(CHAR);
* text('Have a wonderful day', 0, 10, 100);
*
*
* textSize(20);
* textWrap(CHAR);
* text('祝你有美好的一天', 0, 10, 100);
*
*
* let font;
*
* function preload() {
* font = loadFont('assets/inconsolata.otf');
* }
*
* function setup() {
* fill('deeppink');
* textFont(font);
* textSize(36);
* text('p5*js', 10, 50);
*
* describe('The text "p5*js" written in pink on a white background.');
* }
*
*
* function setup() {
* loadFont('assets/inconsolata.otf', font => {
* fill('deeppink');
* textFont(font);
* textSize(36);
* text('p5*js', 10, 50);
*
* describe('The text "p5*js" written in pink on a white background.');
* });
* }
*
*
* function setup() {
* loadFont('assets/inconsolata.otf', success, failure);
* }
*
* function success(font) {
* fill('deeppink');
* textFont(font);
* textSize(36);
* text('p5*js', 10, 50);
*
* describe('The text "p5*js" written in pink on a white background.');
* }
*
* function failure(event) {
* console.error('Oops!', event);
* }
*
*
* function preload() {
* loadFont('assets/inconsolata.otf');
* }
*
* function setup() {
* let p = createP('p5*js');
* p.style('color', 'deeppink');
* p.style('font-family', 'Inconsolata');
* p.style('font-size', '36px');
* p.position(10, 50);
*
* describe('The text "p5*js" written in pink on a white background.');
* }
*
*
* function setup() {
* background(200);
* text('hi', 50, 50);
*
* describe('The text "hi" written in black in the middle of a gray square.');
* }
*
*
* function setup() {
* background('skyblue');
* textSize(100);
* text('🌈', 0, 100);
*
* describe('A rainbow in a blue sky.');
* }
*
*
* function setup() {
* textSize(32);
* fill(255);
* stroke(0);
* strokeWeight(4);
* text('hi', 50, 50);
*
* describe('The text "hi" written in white with a black outline.');
* }
*
*
* function setup() {
* background('black');
* textSize(22);
* fill('yellow');
* text('rainbows', 6, 20);
* fill('cornflowerblue');
* text('rainbows', 6, 45);
* fill('tomato');
* text('rainbows', 6, 70);
* fill('limegreen');
* text('rainbows', 6, 95);
*
* describe('The text "rainbows" written on several lines, each in a different color.');
* }
*
*
* function setup() {
* background(200);
* let s = 'The quick brown fox jumps over the lazy dog.';
* text(s, 10, 10, 70, 80);
*
* describe('The sample text "The quick brown fox..." written in black across several lines.');
* }
*
*
* function setup() {
* background(200);
* rectMode(CENTER);
* let s = 'The quick brown fox jumps over the lazy dog.';
* text(s, 50, 50, 70, 80);
*
* describe('The sample text "The quick brown fox..." written in black across several lines.');
* }
*
*
* let font;
*
* function preload() {
* font = loadFont('assets/inconsolata.otf');
* }
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* textFont(font);
* textSize(32);
* textAlign(CENTER, CENTER);
* }
*
* function draw() {
* background(0);
* rotateY(frameCount / 30);
* text('p5*js', 0, 0);
*
* describe('The text "p5*js" written in white and spinning in 3D.');
* }
*
*
* function setup() {
* background(200);
* textFont('Courier New');
* textSize(24);
* text('hi', 35, 55);
*
* describe('The text "hi" written in a black, monospace font on a gray background.');
* }
*
*
* function setup() {
* background('black');
* fill('palegreen');
* textFont('Courier New', 10);
* text('You turn to the left and see a door. Do you enter?', 5, 5, 90, 90);
* text('>', 5, 70);
*
* describe('A text prompt from a game is written in a green, monospace font on a black background.');
* }
*
*
* function setup() {
* background(200);
* textFont('Verdana');
* let currentFont = textFont();
* text(currentFont, 25, 50);
*
* describe('The text "Verdana" written in a black, sans-serif font on a gray background.');
* }
*
*
* let fontRegular;
* let fontItalic;
* let fontBold;
*
* function preload() {
* fontRegular = loadFont('assets/Regular.otf');
* fontItalic = loadFont('assets/Italic.ttf');
* fontBold = loadFont('assets/Bold.ttf');
* }
*
* function setup() {
* background(200);
* textFont(fontRegular);
* text('I am Normal', 10, 30);
* textFont(fontItalic);
* text('I am Italic', 10, 50);
* textFont(fontBold);
* text('I am Bold', 10, 70);
*
* describe('The statements "I am Normal", "I am Italic", and "I am Bold" written in black on separate lines. The statements have normal, italic, and bold fonts, respectively.');
* }
*
*
* let font;
*
* function preload() {
* // Creates a p5.Font object.
* font = loadFont('assets/inconsolata.otf');
* }
*
* function setup() {
* fill('deeppink');
* textFont(font);
* textSize(36);
* text('p5*js', 10, 50);
*
* describe('The text "p5*js" written in pink on a white background.');
* }
*
*
* let font;
*
* function preload() {
* font = loadFont('assets/inconsolata.otf');
* }
*
* function setup() {
* background(200);
*
* let bbox = font.textBounds('p5*js', 35, 53);
* rect(bbox.x, bbox.y, bbox.w, bbox.h);
*
* textFont(font);
* text('p5*js', 35, 53);
*
* describe('The text "p5*js" written in black inside a white rectangle.');
* }
*
*
* let font;
*
* function preload() {
* font = loadFont('assets/inconsolata.otf');
* }
*
* function setup() {
* background(200);
*
* textFont(font);
* textSize(15);
* textAlign(CENTER, CENTER);
*
* let bbox = font.textBounds('p5*js', 50, 50);
* rect(bbox.x, bbox.y, bbox.w, bbox.h);
*
* text('p5*js', 50, 50);
*
* describe('The text "p5*js" written in black inside a white rectangle.');
* }
*
*
* let font;
*
* function preload() {
* font = loadFont('assets/inconsolata.otf');
* }
*
* function setup() {
* background(200);
*
* let bbox = font.textBounds('p5*js', 31, 53, 15);
* rect(bbox.x, bbox.y, bbox.w, bbox.h);
*
* textFont(font);
* textSize(15);
* text('p5*js', 31, 53);
*
* describe('The text "p5*js" written in black inside a white rectangle.');
* }
*
*
* let font;
*
* function preload() {
* font = loadFont('assets/inconsolata.otf');
* }
*
* function setup() {
* background(200);
* let points = font.textToPoints('p5*js', 6, 60, 35, { sampleFactor: 0.5 });
* points.forEach(p => {
* point(p.x, p.y);
* });
*
* describe('A set of black dots outlining the text "p5*js" on a gray background.');
* }
*
*
* function setup() {
* let myArray = ['Mango', 'Apple', 'Papaya'];
* print(myArray); // ['Mango', 'Apple', 'Papaya']
*
* append(myArray, 'Peach');
* print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
* }
*
* let src = ['A', 'B', 'C'];
* let dst = [1, 2, 3];
* let srcPosition = 1;
* let dstPosition = 0;
* let length = 2;
*
* print(src); // ['A', 'B', 'C']
* print(dst); // [ 1 , 2 , 3 ]
*
* arrayCopy(src, srcPosition, dst, dstPosition, length);
* print(dst); // ['B', 'C', 3]
*
* function setup() {
* let arr1 = ['A', 'B', 'C'];
* let arr2 = [1, 2, 3];
*
* print(arr1); // ['A','B','C']
* print(arr2); // [1,2,3]
*
* let arr3 = concat(arr1, arr2);
*
* print(arr1); // ['A','B','C']
* print(arr2); // [1, 2, 3]
* print(arr3); // ['A','B','C', 1, 2, 3]
* }
*
* function setup() {
* let myArray = ['A', 'B', 'C'];
* print(myArray); // ['A','B','C']
*
* reverse(myArray);
* print(myArray); // ['C','B','A']
* }
*
* function setup() {
* let myArray = ['A', 'B', 'C'];
* print(myArray); // ['A', 'B', 'C']
* let newArray = shorten(myArray);
* print(myArray); // ['A','B','C']
* print(newArray); // ['A','B']
* }
*
* function setup() {
* let regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
* print(regularArr);
* shuffle(regularArr, true); // force modifications to passed array
* print(regularArr);
*
* // By default shuffle() returns a shuffled cloned array:
* let newArr = shuffle(regularArr);
* print(regularArr);
* print(newArr);
* }
*
* function setup() {
* let words = ['banana', 'apple', 'pear', 'lime'];
* print(words); // ['banana', 'apple', 'pear', 'lime']
* let count = 4; // length of array
*
* words = sort(words, count);
* print(words); // ['apple', 'banana', 'lime', 'pear']
* }
*
* function setup() {
* let numbers = [2, 6, 1, 5, 14, 9, 8, 12];
* print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
* let count = 5; // Less than the length of the array
*
* numbers = sort(numbers, count);
* print(numbers); // [1,2,5,6,14,9,8,12]
* }
*
* function setup() {
* let myArray = [0, 1, 2, 3, 4];
* let insArray = ['A', 'B', 'C'];
* print(myArray); // [0, 1, 2, 3, 4]
* print(insArray); // ['A','B','C']
*
* splice(myArray, insArray, 3);
* print(myArray); // [0,1,2,'A','B','C',3,4]
* }
*
* function setup() {
* let myArray = [1, 2, 3, 4, 5];
* print(myArray); // [1, 2, 3, 4, 5]
*
* let sub1 = subset(myArray, 0, 3);
* let sub2 = subset(myArray, 2, 2);
* print(sub1); // [1,2,3]
* print(sub2); // [3,4]
* }
*
* let str = '20';
* let diameter = float(str);
* ellipse(width / 2, height / 2, diameter, diameter);
* describe('20-by-20 white ellipse in the center of the canvas');
*
* print(float('10.31')); // 10.31
* print(float('Infinity')); // Infinity
* print(float('-Infinity')); // -Infinity
*
* print(int('10')); // 10
* print(int(10.31)); // 10
* print(int(-10)); // -10
* print(int(true)); // 1
* print(int(false)); // 0
* print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]
* print(int(Infinity)); // Infinity
* print(int('-Infinity')); // -Infinity
*
* print(str('10')); // "10"
* print(str(10.31)); // "10.31"
* print(str(-10)); // "-10"
* print(str(true)); // "true"
* print(str(false)); // "false"
* print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]
*
* print(boolean(0)); // false
* print(boolean(1)); // true
* print(boolean('true')); // true
* print(boolean('abcd')); // false
* print(boolean([0, 12, 'true'])); // [false, true, true]
*
* print(byte(127)); // 127
* print(byte(128)); // -128
* print(byte(23.4)); // 23
* print(byte('23.4')); // 23
* print(byte('hello')); // NaN
* print(byte(true)); // 1
* print(byte([0, 255, '100'])); // [0, -1, 100]
*
* print(char(65)); // "A"
* print(char('65')); // "A"
* print(char([65, 66, 67])); // [ "A", "B", "C" ]
* print(join(char([65, 66, 67]), '')); // "ABC"
*
* print(unchar('A')); // 65
* print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
* print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]
*
* print(hex(255)); // "000000FF"
* print(hex(255, 6)); // "0000FF"
* print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]
* print(Infinity); // "FFFFFFFF"
* print(-Infinity); // "00000000"
*
* print(unhex('A')); // 10
* print(unhex('FF')); // 255
* print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]
*
* let array = ['Hello', 'world!'];
* let separator = ' ';
* let message = join(array, separator);
* text(message, 5, 50);
* describe('“Hello world!” displayed middle left of canvas.');
*
*
* let string = 'Hello p5js*!';
* let regexp = 'p5js\\*';
* let m = match(string, regexp);
* text(m, 5, 50);
* describe('“p5js*” displayed middle left of canvas.');
*
*
* let string = 'Hello p5js*! Hello world!';
* let regexp = 'Hello';
* matchAll(string, regexp);
*
*
* function setup() {
* background(200);
* let num1 = 321;
* let num2 = -1321;
*
* noStroke();
* fill(0);
* textSize(16);
*
* text(nf(num1, 4, 2), 10, 30);
* text(nf(num2, 4, 2), 10, 80);
* // Draw dividing line
* stroke(120);
* line(0, 50, width, 50);
*
* describe('“0321.00” middle top, “-1321.00” middle bottom canvas');
* }
*
*
* function setup() {
* background(200);
* let num = 11253106.115;
* let numArr = [1, 1, 2];
*
* noStroke();
* fill(0);
* textSize(12);
*
* // Draw formatted numbers
* text(nfc(num, 4), 10, 30);
* text(nfc(numArr, 2), 10, 80);
*
* // Draw dividing line
* stroke(120);
* line(0, 50, width, 50);
*
* describe('“11,253,106.115” top middle and “1.00,1.00,2.00” displayed bottom mid');
* }
*
*
* function setup() {
* background(200);
* let num1 = 11253106.115;
* let num2 = -11253106.115;
*
* noStroke();
* fill(0);
* textSize(12);
*
* // Draw formatted numbers
* text(nfp(num1, 4, 2), 10, 30);
* text(nfp(num2, 4, 2), 10, 80);
*
* // Draw dividing line
* stroke(120);
* line(0, 50, width, 50);
*
* describe('“+11253106.11” top middle and “-11253106.11” displayed bottom middle');
* }
*
*
* function setup() {
* background(200);
* let num1 = 321;
* let num2 = -1321;
*
* noStroke();
* fill(0);
* textSize(16);
*
* // nfs() aligns num1 (positive number) with num2 (negative number) by
* // adding a blank space in front of the num1 (positive number)
* // [left = 4] in num1 add one 0 in front, to align the digits with num2
* // [right = 2] in num1 and num2 adds two 0's after both numbers
* // To see the differences check the example of nf() too.
* text(nfs(num1, 4, 2), 10, 30);
* text(nfs(num2, 4, 2), 10, 80);
* // Draw dividing line
* stroke(120);
* line(0, 50, width, 50);
*
* describe('“0321.00” top middle and “-1321.00” displayed bottom middle');
* }
*
*
* let names = 'Pat,Xio,Alex';
* let splitString = split(names, ',');
* text(splitString[0], 5, 30);
* text(splitString[1], 5, 50);
* text(splitString[2], 5, 70);
* describe('“Pat” top left, “Xio” mid left, and “Alex” displayed bottom left');
*
*
* function setup() {
* let myStr = 'Mango, Banana, Lime';
* let myStrArr = splitTokens(myStr, ',');
*
* print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
* }
*
*
* let string = trim(' No new lines\n ');
* text(string + ' here', 2, 50);
* describe('“No new lines here” displayed center canvas');
*
*
* let d = day();
* text('Current day: \n' + d, 5, 50);
* describe('Current day is displayed');
*
*
* let h = hour();
* text('Current hour:\n' + h, 5, 50);
* describe('Current hour is displayed');
*
*
* let m = minute();
* text('Current minute: \n' + m, 5, 50);
* describe('Current minute is displayed');
*
*
* let millisecond = millis();
* text('Milliseconds \nrunning: \n' + millisecond, 5, 40);
* describe('number of milliseconds since sketch has started displayed');
*
*
* let m = month();
* text('Current month: \n' + m, 5, 50);
* describe('Current month is displayed');
*
*
* let s = second();
* text('Current second: \n' + s, 5, 50);
* describe('Current second is displayed');
*
*
* let y = year();
* text('Current year: \n' + y, 5, 50);
* describe('Current year is displayed');
*
*
* let shapes;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* makeShapes();
* }
*
* function makeShapes() {
* beginGeometry();
* scale(0.18);
*
* push();
* translate(100, -50);
* scale(0.5);
* rotateX(PI/4);
* cone();
* pop();
* cone();
*
* beginShape();
* vertex(-20, -50);
* quadraticVertex(
* -40, -70,
* 0, -60
* );
* endShape();
*
* beginShape(TRIANGLE_STRIP);
* for (let y = 20; y <= 60; y += 10) {
* for (let x of [20, 60]) {
* vertex(x, y);
* }
* }
* endShape();
*
* beginShape();
* vertex(-100, -120);
* vertex(-120, -110);
* vertex(-105, -100);
* endShape();
*
* shapes = endGeometry();
* }
*
* function draw() {
* background(255);
* lights();
* orbitControl();
* model(shapes);
* }
*
*
* let particles;
* let button;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* button = createButton('New');
* button.mousePressed(makeParticles);
* makeParticles();
* }
*
* function makeParticles() {
* if (particles) freeGeometry(particles);
*
* particles = buildGeometry(() => {
* for (let i = 0; i < 60; i++) {
* push();
* translate(
* randomGaussian(0, 20),
* randomGaussian(0, 20),
* randomGaussian(0, 20)
* );
* sphere(5);
* pop();
* }
* });
* }
*
* function draw() {
* background(255);
* noStroke();
* lights();
* orbitControl();
* model(particles);
* }
*
*
* // draw a plane
* // with width 50 and height 50
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('a white plane with black wireframe lines');
* }
*
* function draw() {
* background(200);
* plane(50, 50);
* }
*
*
* // draw a spinning box
* // with width, height and depth of 50
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* describe('a white box rotating in 3D space');
* }
*
* function draw() {
* background(200);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* box(50);
* }
*
*
* // draw a sphere with radius 40
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('a white sphere with black wireframe lines');
* }
*
* function draw() {
* background(205, 102, 94);
* sphere(40);
* }
*
*
* let detailX;
* // slide to see how detailX works
* function setup() {
* createCanvas(100, 100, WEBGL);
* detailX = createSlider(3, 24, 3);
* detailX.position(10, height + 5);
* detailX.style('width', '80px');
* describe(
* 'a white sphere with low detail on the x-axis, including a slider to adjust detailX'
* );
* }
*
* function draw() {
* background(205, 105, 94);
* rotateY(millis() / 1000);
* sphere(40, detailX.value(), 16);
* }
*
*
* let detailY;
* // slide to see how detailY works
* function setup() {
* createCanvas(100, 100, WEBGL);
* detailY = createSlider(3, 16, 3);
* detailY.position(10, height + 5);
* detailY.style('width', '80px');
* describe(
* 'a white sphere with low detail on the y-axis, including a slider to adjust detailY'
* );
* }
*
* function draw() {
* background(205, 105, 94);
* rotateY(millis() / 1000);
* sphere(40, 16, detailY.value());
* }
*
*
* // draw a spinning cylinder
* // with radius 20 and height 50
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('a rotating white cylinder');
* }
*
* function draw() {
* background(205, 105, 94);
* rotateX(frameCount * 0.01);
* rotateZ(frameCount * 0.01);
* cylinder(20, 50);
* }
*
*
* // slide to see how detailX works
* let detailX;
* function setup() {
* createCanvas(100, 100, WEBGL);
* detailX = createSlider(3, 24, 3);
* detailX.position(10, height + 5);
* detailX.style('width', '80px');
* describe(
* 'a rotating white cylinder with limited X detail, with a slider that adjusts detailX'
* );
* }
*
* function draw() {
* background(205, 105, 94);
* rotateY(millis() / 1000);
* cylinder(20, 75, detailX.value(), 1);
* }
*
*
* // slide to see how detailY works
* let detailY;
* function setup() {
* createCanvas(100, 100, WEBGL);
* detailY = createSlider(1, 16, 1);
* detailY.position(10, height + 5);
* detailY.style('width', '80px');
* describe(
* 'a rotating white cylinder with limited Y detail, with a slider that adjusts detailY'
* );
* }
*
* function draw() {
* background(205, 105, 94);
* rotateY(millis() / 1000);
* cylinder(20, 75, 16, detailY.value());
* }
*
*
* // draw a spinning cone
* // with radius 40 and height 70
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('a rotating white cone');
* }
*
* function draw() {
* background(200);
* rotateX(frameCount * 0.01);
* rotateZ(frameCount * 0.01);
* cone(40, 70);
* }
*
*
* // slide to see how detailx works
* let detailX;
* function setup() {
* createCanvas(100, 100, WEBGL);
* detailX = createSlider(3, 16, 3);
* detailX.position(10, height + 5);
* detailX.style('width', '80px');
* describe(
* 'a rotating white cone with limited X detail, with a slider that adjusts detailX'
* );
* }
*
* function draw() {
* background(205, 102, 94);
* rotateY(millis() / 1000);
* cone(30, 65, detailX.value(), 16);
* }
*
*
* // slide to see how detailY works
* let detailY;
* function setup() {
* createCanvas(100, 100, WEBGL);
* detailY = createSlider(3, 16, 3);
* detailY.position(10, height + 5);
* detailY.style('width', '80px');
* describe(
* 'a rotating white cone with limited Y detail, with a slider that adjusts detailY'
* );
* }
*
* function draw() {
* background(205, 102, 94);
* rotateY(millis() / 1000);
* cone(30, 65, 16, detailY.value());
* }
*
*
* // draw an ellipsoid
* // with radius 30, 40 and 40.
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('a white 3d ellipsoid');
* }
*
* function draw() {
* background(205, 105, 94);
* ellipsoid(30, 40, 40);
* }
*
*
* // slide to see how detailX works
* let detailX;
* function setup() {
* createCanvas(100, 100, WEBGL);
* detailX = createSlider(2, 24, 12);
* detailX.position(10, height + 5);
* detailX.style('width', '80px');
* describe(
* 'a rotating white ellipsoid with limited X detail, with a slider that adjusts detailX'
* );
* }
*
* function draw() {
* background(205, 105, 94);
* rotateY(millis() / 1000);
* ellipsoid(30, 40, 40, detailX.value(), 8);
* }
*
*
* // slide to see how detailY works
* let detailY;
* function setup() {
* createCanvas(100, 100, WEBGL);
* detailY = createSlider(2, 24, 6);
* detailY.position(10, height + 5);
* detailY.style('width', '80px');
* describe(
* 'a rotating white ellipsoid with limited Y detail, with a slider that adjusts detailY'
* );
* }
*
* function draw() {
* background(205, 105, 9);
* rotateY(millis() / 1000);
* ellipsoid(30, 40, 40, 12, detailY.value());
* }
*
*
* // draw a spinning torus
* // with ring radius 30 and tube radius 15
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* describe('a rotating white torus');
* }
*
* function draw() {
* background(205, 102, 94);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* torus(30, 15);
* }
*
*
* // slide to see how detailX works
* let detailX;
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* detailX = createSlider(3, 24, 3);
* detailX.position(10, height + 5);
* detailX.style('width', '80px');
* describe(
* 'a rotating white torus with limited X detail, with a slider that adjusts detailX'
* );
* }
*
* function draw() {
* background(205, 102, 94);
* rotateY(millis() / 1000);
* torus(30, 15, detailX.value(), 12);
* }
*
*
* // slide to see how detailY works
* let detailY;
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* detailY = createSlider(3, 16, 3);
* detailY.position(10, height + 5);
* detailY.style('width', '80px');
* describe(
* 'a rotating white torus with limited Y detail, with a slider that adjusts detailY'
* );
* }
*
* function draw() {
* background(205, 102, 94);
* rotateY(millis() / 1000);
* torus(30, 15, 16, detailY.value());
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(50);
* stroke(255);
* strokeWeight(4);
* point(25, 0);
* strokeWeight(3);
* point(-25, 0);
* strokeWeight(2);
* point(0, 25);
* strokeWeight(1);
* point(0, -25);
* }
*
*
* //draw a line
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(200);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* // Use fill instead of stroke to change the color of shape.
* fill(255, 0, 0);
* line(10, 10, 0, 60, 60, 20);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* normalMaterial();
* describe(
* 'Camera orbits around a box when mouse is hold-clicked & then moved.'
* );
* camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* }
* function draw() {
* background(200);
*
* // If you execute the line commented out instead of next line, the direction of rotation
* // will be the direction the mouse or touch pointer moves, not around the X or Y axis.
* orbitControl();
* // orbitControl(1, 1, 1, {freeRotation: true});
*
* rotateY(0.5);
* box(30, 50);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* normalMaterial();
* debugMode();
* describe(
* 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.'
* );
* }
*
* function draw() {
* background(200);
* orbitControl();
* box(15, 30);
* // Press the spacebar to turn debugMode off!
* if (keyIsDown(32)) {
* noDebugMode();
* }
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* normalMaterial();
* debugMode(GRID);
* describe('a 3D box is centered on a grid in a 3D sketch.');
* }
*
* function draw() {
* background(200);
* orbitControl();
* box(15, 30);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* normalMaterial();
* debugMode(AXES);
* describe(
* 'a 3D box is centered in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.'
* );
* }
*
* function draw() {
* background(200);
* orbitControl();
* box(15, 30);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* normalMaterial();
* debugMode(GRID, 100, 10, 0, 0, 0);
* describe('a 3D box is centered on a grid in a 3D sketch');
* }
*
* function draw() {
* background(200);
* orbitControl();
* box(15, 30);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* normalMaterial();
* debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);
* describe(
* 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.'
* );
* }
*
* function draw() {
* noStroke();
* background(200);
* orbitControl();
* box(15, 30);
* // set the stroke color and weight for the grid!
* stroke(255, 0, 150);
* strokeWeight(0.8);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* normalMaterial();
* debugMode();
* describe(
* 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.'
* );
* }
*
* function draw() {
* background(200);
* orbitControl();
* box(15, 30);
* // Press the spacebar to turn debugMode off!
* if (keyIsDown(32)) {
* noDebugMode();
* }
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* noStroke();
* describe('sphere with coral color under black light');
* }
* function draw() {
* background(100);
* ambientLight(0); // black light (no light)
* ambientMaterial(255, 127, 80); // coral material
* sphere(40);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* noStroke();
* describe('sphere with coral color under white light');
* }
* function draw() {
* background(100);
* ambientLight(255); // white light
* ambientMaterial(255, 127, 80); // coral material
* sphere(40);
* }
*
*
* function setup() {
* createCanvas(100,100,WEBGL);
* camera(0,-100,300);
* }
* function draw() {
* background(230);
* ambientMaterial(237,34,93); //Pink Material
* ambientLight(mouseY);
* //As you move the mouse up to down it changes from no ambient light to full ambient light.
* rotateY(millis()/2000);
* box(100);
* }
*
*
* let setRedSpecularColor = true;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* noStroke();
* describe(
* 'Sphere with specular highlight. Clicking the mouse toggles the specular highlight color between red and the default white.'
* );
* }
*
* function draw() {
* background(0);
*
* ambientLight(60);
*
* // add a point light to showcase specular color
* // -- use mouse location to position the light
* let lightPosX = mouseX - width / 2;
* let lightPosY = mouseY - height / 2;
* // -- set the light's specular color
* if (setRedSpecularColor) {
* specularColor(255, 0, 0); // red specular highlight
* }
* // -- create the light
* pointLight(200, 200, 200, lightPosX, lightPosY, 50); // white light
*
* // use specular material with high shininess
* specularMaterial(150);
* shininess(50);
*
* sphere(30, 64, 64);
* }
*
* function mouseClicked() {
* setRedSpecularColor = !setRedSpecularColor;
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe(
* 'scene with sphere and directional light. The direction of the light is controlled with the mouse position.'
* );
* }
* function draw() {
* background(0);
* //move your mouse to change light direction
* let dirX = (mouseX / width - 0.5) * 2;
* let dirY = (mouseY / height - 0.5) * 2;
* directionalLight(250, 250, 250, -dirX, -dirY, -1);
* noStroke();
* sphere(40);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe(
* 'scene with sphere and point light. The position of the light is controlled with the mouse position.'
* );
* }
* function draw() {
* background(0);
* // move your mouse to change light position
* let locX = mouseX - width / 2;
* let locY = mouseY - height / 2;
* // to set the light position,
* // think of the world's coordinate as:
* // -width/2,-height/2 ----------- width/2,-height/2
* // | |
* // | 0,0 |
* // | |
* // -width/2,height/2 ----------- width/2,height/2
* pointLight(250, 250, 250, locX, locY, 50);
* noStroke();
* sphere(40);
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/outdoor_image.jpg');
* }
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, 0, 50*sqrt(3), 0, 0, 0, 0 ,1, 0);
* perspective(PI/3, 1, 5, 500);
* }
* function draw() {
* background(220);
*
* push();
* camera(0, 0, 1, 0, 0, 0, 0, 1, 0);
* ortho(-1, 1, -1, 1, 0, 1);
* noLights();
* noStroke();
* texture(img);
* plane(2);
* pop();
*
* ambientLight(50);
* imageLight(img);
* specularMaterial(20);
* noStroke();
* rotateX(frameCount * 0.005);
* rotateY(frameCount * 0.005);
* box(50);
* }
*
*
* let img;
* let slider;
*
* function preload() {
* img = loadImage('assets/outdoor_spheremap.jpg');
* }
* function setup() {
* createCanvas(100, 100, WEBGL);
* slider = createSlider(0, 400, 100, 1);
* slider.position(0, height);
* camera(0, 0, 50*sqrt(3), 0, 0, 0, 0 ,1, 0);
* perspective(PI/3, 1, 5, 500);
* }
* function draw() {
* background(220);
*
* push();
* camera(0, 0, 1, 0, 0, 0, 0, 1, 0);
* ortho(-1, 1, -1, 1, 0, 1);
* noLights();
* noStroke();
* texture(img);
* plane(2);
* pop();
*
* ambientLight(50);
* imageLight(img);
* specularMaterial(20);
* shininess(slider.value());
* noStroke();
* sphere(30);
* }
*
*
* let img;
* function preload() {
* img = loadImage('assets/outdoor_spheremap.jpg');
* }
* function setup() {
* createCanvas(100 ,100 ,WEBGL);
* }
* function draw() {
* panorama(img);
* imageMode(CENTER);
* orbitControl();
* noStroke();
* push();
* imageLight(img);
* specularMaterial('green');
* shininess(200);
* metalness(100);
* sphere(25);
* pop();
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* describe('the light is partially ambient and partially directional');
* }
* function draw() {
* background(0);
* lights();
* rotateX(millis() / 1000);
* rotateY(millis() / 1000);
* rotateZ(millis() / 1000);
* box();
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* noStroke();
* describe(
* 'Two spheres with different falloff values show different intensity of light'
* );
* }
* function draw() {
* background(125);
*
* let locX = mouseX - width / 2;
* let locY = mouseY - height / 2;
* locX /= 2; // half scale
*
* lightFalloff(1, 0, 0);
* push();
* translate(-25, 0, 0);
* pointLight(250, 250, 250, locX - 25, locY, 50);
* sphere(20);
* pop();
*
* lightFalloff(0.97, 0.03, 0);
* push();
* translate(25, 0, 0);
* pointLight(250, 250, 250, locX + 25, locY, 50);
* sphere(20);
* pop();
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe(
* 'scene with sphere and spot light. The position of the light is controlled with the mouse position.'
* );
* }
* function draw() {
* background(0);
* // move your mouse to change light position
* let locX = mouseX - width / 2;
* let locY = mouseY - height / 2;
* // to set the light position,
* // think of the world's coordinate as:
* // -width/2,-height/2 ----------- width/2,-height/2
* // | |
* // | 0,0 |
* // | |
* // -width/2,height/2 ----------- width/2,height/2
* ambientLight(50);
* spotLight(0, 250, 0, locX, locY, 100, 0, 0, -1, Math.PI / 16);
* noStroke();
* sphere(40);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe(
* 'Three white spheres. Each appears as a different color due to lighting.'
* );
* }
* function draw() {
* background(200);
* noStroke();
*
* ambientLight(255, 0, 0);
* translate(-30, 0, 0);
* ambientMaterial(255);
* sphere(13);
*
* noLights();
* translate(30, 0, 0);
* ambientMaterial(255);
* sphere(13);
*
* ambientLight(0, 255, 0);
* translate(30, 0, 0);
* ambientMaterial(255);
* sphere(13);
* }
*
* .stl, .obj).
* @return {p5.Geometry} the p5.Geometry object
*
* @example
*
* //draw a spinning octahedron
* let octahedron;
*
* function preload() {
* octahedron = loadModel('assets/octahedron.obj');
* }
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('Vertically rotating 3-d octahedron.');
* }
*
* function draw() {
* background(200);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* model(octahedron);
* }
*
*
* //draw a spinning teapot
* let teapot;
*
* function preload() {
* // Load model with normalise parameter set to true
* teapot = loadModel('assets/teapot.obj', true);
* }
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('Vertically rotating 3-d teapot with red, green and blue gradient.');
* }
*
* function draw() {
* background(200);
* scale(0.4); // Scaled to make model fit into canvas
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* normalMaterial(); // For effect
* model(teapot);
* }
*
*
* //draw a spinning octahedron
* let octahedron;
*
* function preload() {
* octahedron = loadModel('assets/octahedron.obj');
* }
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('Vertically rotating 3-d octahedron.');
* }
*
* function draw() {
* background(200);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* model(octahedron);
* }
*
*
* let mandel;
* function preload() {
* // load the shader definitions from files
* mandel = loadShader('assets/shader.vert', 'assets/shader.frag');
* }
* function setup() {
* createCanvas(100, 100, WEBGL);
* // use the shader
* shader(mandel);
* noStroke();
* mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
* describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.');
* }
*
* function draw() {
* mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
* quad(-1, -1, 1, -1, 1, 1, -1, 1);
* }
*
*
*
* // the vertex shader is called for each vertex
* let vs = `
* precision highp float;
* uniform mat4 uModelViewMatrix;
* uniform mat4 uProjectionMatrix;
*
* attribute vec3 aPosition;
* attribute vec2 aTexCoord;
* varying vec2 vTexCoord;
*
* void main() {
* vTexCoord = aTexCoord;
* vec4 positionVec4 = vec4(aPosition, 1.0);
* gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
* }
* `;
*
*
* // the fragment shader is called for each pixel
* let fs = `
* precision highp float;
* uniform vec2 p;
* uniform float r;
* const int I = 500;
* varying vec2 vTexCoord;
* void main() {
* vec2 c = p + gl_FragCoord.xy * r, z = c;
* float n = 0.0;
* for (int i = I; i > 0; i --) {
* if(z.x*z.x+z.y*z.y > 4.0) {
* n = float(i)/float(I);
* break;
* }
* z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;
* }
* gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);
* }`;
*
* let mandel;
* function setup() {
* createCanvas(100, 100, WEBGL);
*
* // create and initialize the shader
* mandel = createShader(vs, fs);
* shader(mandel);
* noStroke();
*
* // 'p' is the center point of the Mandelbrot image
* mandel.setUniform('p', [-0.74364388703, 0.13182590421]);
* describe('zooming Mandelbrot set. a colorful, infinitely detailed fractal.');
* }
*
* function draw() {
* // 'r' is the size of the image in Mandelbrot-space
* mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
* plane(width, height);
* }
*
*
* function setup() {
* let fragSrc = `precision highp float;
* void main() {
* gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
* }`;
*
* createCanvas(100, 100, WEBGL);
* let s = createFilterShader(fragSrc);
* filter(s);
* describe('a yellow canvas');
* }
*
*
* let img, s;
* function preload() {
* img = loadImage('assets/bricks.jpg');
* }
* function setup() {
* let fragSrc = `precision highp float;
*
* // x,y coordinates, given from the vertex shader
* varying vec2 vTexCoord;
*
* // the canvas contents, given from filter()
* uniform sampler2D tex0;
* // other useful information from the canvas
* uniform vec2 texelSize;
* uniform vec2 canvasSize;
* // a custom variable from this sketch
* uniform float darkness;
*
* void main() {
* // get the color at current pixel
* vec4 color = texture2D(tex0, vTexCoord);
* // set the output color
* color.b = 1.0;
* color *= darkness;
* gl_FragColor = vec4(color.rgb, 1.0);
* }`;
*
* createCanvas(100, 100, WEBGL);
* s = createFilterShader(fragSrc);
* }
* function draw() {
* image(img, -50, -50);
* s.setUniform('darkness', 0.5);
* filter(s);
* describe('a image of bricks tinted dark blue');
* }
*
*
* // Click within the image to toggle
* // the shader used by the quad shape
* // Note: for an alternative approach to the same example,
* // involving changing uniforms please refer to:
* // https://p5js.org/reference/#/p5.Shader/setUniform
*
* let redGreen;
* let orangeBlue;
* let showRedGreen = false;
*
* function preload() {
* // note that we are using two instances
* // of the same vertex and fragment shaders
* redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
* orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
* }
*
* function setup() {
* createCanvas(100, 100, WEBGL);
*
* // initialize the colors for redGreen shader
* shader(redGreen);
* redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
* redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);
*
* // initialize the colors for orangeBlue shader
* shader(orangeBlue);
* orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
* orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);
*
* noStroke();
*
* describe(
* 'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.'
* );
* }
*
* function draw() {
* // update the offset values for each shader,
* // moving orangeBlue in vertical and redGreen
* // in horizontal direction
* orangeBlue.setUniform('offset', [0, sin(millis() / 2000) + 1]);
* redGreen.setUniform('offset', [sin(millis() / 2000), 1]);
*
* if (showRedGreen === true) {
* shader(redGreen);
* } else {
* shader(orangeBlue);
* }
* quad(-1, -1, 1, -1, 1, 1, -1, 1);
* }
*
* function mouseClicked() {
* showRedGreen = !showRedGreen;
* }
*
*
* // This variable will hold our shader object
* let shaderProgram;
*
* // This variable will hold our vertex shader source code
* let vertSrc = `
* attribute vec3 aPosition;
* attribute vec2 aTexCoord;
* uniform mat4 uProjectionMatrix;
* uniform mat4 uModelViewMatrix;
* varying vec2 vTexCoord;
*
* void main() {
* vTexCoord = aTexCoord;
* vec4 position = vec4(aPosition, 1.0);
* gl_Position = uProjectionMatrix * uModelViewMatrix * position;
* }
* `;
*
* // This variable will hold our fragment shader source code
* let fragSrc = `
* precision mediump float;
*
* varying vec2 vTexCoord;
*
* void main() {
* vec2 uv = vTexCoord;
* vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));
* gl_FragColor = vec4(color, 1.0);
* }
* `;
*
* function setup() {
* // Shaders require WEBGL mode to work
* createCanvas(100, 100, WEBGL);
*
* // Create our shader
* shaderProgram = createShader(vertSrc, fragSrc);
*
* describe(
* 'Two rotating cubes. The left one is painted using a custom (user-defined) shader, while the right one is painted using the default fill shader.'
* );
* }
*
* function draw() {
* // Clear the scene
* background(200);
*
* // Draw a box using our shader
* // shader() sets the active shader with our shader
* shader(shaderProgram);
* push();
* translate(-width / 4, 0, 0);
* rotateX(millis() * 0.00025);
* rotateY(millis() * 0.0005);
* box(width / 4);
* pop();
*
* // Draw a box using the default fill shader
* // resetShader() restores the default fill shader
* resetShader();
* fill(255, 0, 0);
* push();
* translate(width / 4, 0, 0);
* rotateX(millis() * 0.00025);
* rotateY(millis() * 0.0005);
* box(width / 4);
* pop();
* }
*
*
* let img;
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('spinning cube with a texture from an image');
* }
*
* function draw() {
* background(0);
* rotateZ(frameCount * 0.01);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* //pass image as texture
* texture(img);
* box(width / 2);
* }
*
*
* let pg;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* pg = createGraphics(200, 200);
* pg.textSize(75);
* describe('plane with a texture from an image created by createGraphics()');
* }
*
* function draw() {
* background(0);
* pg.background(255);
* pg.text('hello!', 0, 100);
* //pass image as texture
* texture(pg);
* rotateX(0.5);
* noStroke();
* plane(50);
* }
*
*
* let vid;
* function preload() {
* vid = createVideo('assets/fingers.mov');
* vid.hide();
* }
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('rectangle with video as texture');
* }
*
* function draw() {
* background(0);
* //pass video frame as texture
* texture(vid);
* rect(-40, -40, 80, 80);
* }
*
* function mousePressed() {
* vid.loop();
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('quad with a texture, mapped using normalized coordinates');
* }
*
* function draw() {
* background(0);
* texture(img);
* textureMode(NORMAL);
* beginShape();
* vertex(-40, -40, 0, 0);
* vertex(40, -40, 1, 0);
* vertex(40, 40, 1, 1);
* vertex(-40, 40, 0, 1);
* endShape();
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('quad with a texture, mapped using normalized coordinates');
* }
*
* function draw() {
* texture(img);
* textureMode(NORMAL);
* beginShape();
* vertex(-50, -50, 0, 0);
* vertex(50, -50, 1, 0);
* vertex(50, 50, 1, 1);
* vertex(-50, 50, 0, 1);
* endShape();
* }
*
*
* let img;
*
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('quad with a texture, mapped using image coordinates');
* }
*
* function draw() {
* texture(img);
* textureMode(IMAGE);
* beginShape();
* vertex(-50, -50, 0, 0);
* vertex(50, -50, img.width, 0);
* vertex(50, 50, img.width, img.height);
* vertex(-50, 50, 0, img.height);
* endShape();
* }
*
*
* let img;
* function preload() {
* img = loadImage('assets/rockies128.jpg');
* }
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* textureWrap(MIRROR);
* describe('an image of the rocky mountains repeated in mirrored tiles');
* }
*
* function draw() {
* background(0);
*
* let dX = mouseX;
* let dY = mouseY;
*
* let u = lerp(1.0, 2.0, dX);
* let v = lerp(1.0, 2.0, dY);
*
* scale(width / 2);
*
* texture(img);
*
* beginShape(TRIANGLES);
* vertex(-1, -1, 0, 0, 0);
* vertex(1, -1, 0, u, 0);
* vertex(1, 1, 0, u, v);
*
* vertex(1, 1, 0, u, v);
* vertex(-1, 1, 0, 0, v);
* vertex(-1, -1, 0, 0, 0);
* endShape();
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('Sphere with normal material');
* }
*
* function draw() {
* background(200);
* normalMaterial();
* sphere(40);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('sphere reflecting red, blue, and green light');
* }
* function draw() {
* background(0);
* noStroke();
* ambientLight(255);
* ambientMaterial(70, 130, 230);
* sphere(40);
* }
*
*
* // ambientLight is both red and blue (magenta),
* // so object only reflects it's red and blue components
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('box reflecting only red and blue light');
* }
* function draw() {
* background(70);
* ambientLight(255, 0, 255); // magenta light
* ambientMaterial(255); // white material
* box(30);
* }
*
*
* // ambientLight is green. Since object does not contain
* // green, it does not reflect any light
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('box reflecting no light');
* }
* function draw() {
* background(70);
* ambientLight(0, 255, 0); // green light
* ambientMaterial(255, 0, 255); // magenta material
* box(30);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('sphere with green emissive material');
* }
* function draw() {
* background(0);
* noStroke();
* ambientLight(0);
* emissiveMaterial(130, 230, 0);
* sphere(40);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* noStroke();
* describe('torus with specular material');
* }
*
* function draw() {
* background(0);
*
* ambientLight(60);
*
* // add point light to showcase specular material
* let locX = mouseX - width / 2;
* let locY = mouseY - height / 2;
* pointLight(255, 255, 255, locX, locY, 50);
*
* specularMaterial(250);
* shininess(50);
* torus(30, 10, 64, 64);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* describe('two spheres, one more shiny than the other');
* }
* function draw() {
* background(0);
* noStroke();
* let locX = mouseX - width / 2;
* let locY = mouseY - height / 2;
* ambientLight(60, 60, 60);
* pointLight(255, 255, 255, locX, locY, 50);
* specularMaterial(250);
* translate(-25, 0, 0);
* shininess(1);
* sphere(20);
* translate(50, 0, 0);
* shininess(20);
* sphere(20);
* }
*
*
* let img;
* let slider;
* let slider2;
* function preload() {
* img = loadImage('assets/outdoor_spheremap.jpg');
* }
* function setup() {
* createCanvas(100, 100, WEBGL);
* slider = createSlider(0, 300, 100, 1);
* let sliderLabel = createP('Metalness');
* sliderLabel.position(100, height - 25);
* slider2 = createSlider(0, 350, 100);
* slider2.position(0, height + 20);
* slider2Label = createP('Shininess');
* slider2Label.position(100, height);
* }
* function draw() {
* background(220);
* imageMode(CENTER);
* push();
* image(img, 0, 0, width, height);
* clearDepth();
* pop();
* imageLight(img);
* fill('gray');
* specularMaterial('gray');
* shininess(slider2.value());
* metalness(slider.value());
* noStroke();
* sphere(30);
* }
*
*
* let slider;
* let slider2;
* function setup() {
* createCanvas(100, 100, WEBGL);
* slider = createSlider(0, 200, 100);
* let sliderLabel = createP('Metalness');
* sliderLabel.position(100, height - 25);
* slider2 = createSlider(0, 200, 2);
* slider2.position(0, height + 25);
* let slider2Label = createP('Shininess');
* slider2Label.position(100, height);
* }
* function draw() {
* noStroke();
* background(100);
* fill(255, 215, 0);
* pointLight(255, 255, 255, 5000, 5000, 75);
* specularMaterial('gray');
* ambientLight(100);
* shininess(slider2.value());
* metalness(slider.value());
* rotateY(frameCount * 0.01);
* torus(20, 10);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* describe('a square moving closer and then away from the camera.');
* }
* function draw() {
* background(204);
* //move the camera away from the plane by a sin wave
* camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);
* plane(10, 10);
* }
*
*
* //move slider to see changes!
* //sliders control the first 6 parameters of camera()
* let sliderGroup = [];
* let X;
* let Y;
* let Z;
* let centerX;
* let centerY;
* let centerZ;
* let h = 20;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* //create sliders
* for (var i = 0; i < 6; i++) {
* if (i === 2) {
* sliderGroup[i] = createSlider(10, 400, 200);
* } else {
* sliderGroup[i] = createSlider(-400, 400, 0);
* }
* h = map(i, 0, 6, 5, 85);
* sliderGroup[i].position(10, height + h);
* sliderGroup[i].style('width', '80px');
* }
* describe(
* 'White square repeatedly grows to fill canvas and then shrinks. An interactive example of a red cube with 3 sliders for moving it across x, y, z axis and 3 sliders for shifting its center.'
* );
* }
*
* function draw() {
* background(60);
* // assigning sliders' value to each parameters
* X = sliderGroup[0].value();
* Y = sliderGroup[1].value();
* Z = sliderGroup[2].value();
* centerX = sliderGroup[3].value();
* centerY = sliderGroup[4].value();
* centerZ = sliderGroup[5].value();
* camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);
* stroke(255);
* fill(255, 102, 94);
* box(85);
* }
*
*
* //drag the mouse to look around!
* function setup() {
* createCanvas(100, 100, WEBGL);
* camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* perspective(PI / 3.0, width / height, 0.1, 500);
* describe(
* 'two colored 3D boxes move back and forth, rotating as mouse is dragged.'
* );
* }
* function draw() {
* background(200);
* orbitControl();
* normalMaterial();
*
* rotateX(-0.3);
* rotateY(-0.2);
* translate(0, 0, -50);
*
* push();
* translate(-15, 0, sin(frameCount / 30) * 65);
* box(30);
* pop();
* push();
* translate(15, 0, sin(frameCount / 30 + PI) * 65);
* box(30);
* pop();
* }
*
*
* //drag the mouse to look around!
* //there's no vanishing point
* function setup() {
* createCanvas(100, 100, WEBGL);
* ortho();
* describe(
* 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.'
* );
* }
* function draw() {
* background(200);
* orbitControl();
* normalMaterial();
*
* rotateX(0.2);
* rotateY(-0.2);
* push();
* translate(-15, 0, sin(frameCount / 30) * 65);
* box(30);
* pop();
* push();
* translate(15, 0, sin(frameCount / 30 + PI) * 65);
* box(30);
* pop();
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* setAttributes('antialias', true);
* camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);
* describe(
* 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.'
* );
* }
* function draw() {
* background(200);
* orbitControl();
* normalMaterial();
*
* rotateY(-0.2);
* rotateX(-0.3);
* push();
* translate(-15, 0, sin(frameCount / 30) * 25);
* box(30);
* pop();
* push();
* translate(15, 0, sin(frameCount / 30 + PI) * 25);
* box(30);
* pop();
* }
*
*
* // Creates a camera object and animates it around a box.
* let camera;
* function setup() {
* createCanvas(100, 100, WEBGL);
* background(0);
* camera = createCamera();
* camera.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* camera.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* describe('An example that creates a camera and moves it around the box.');
* }
*
* function draw() {
* background(0);
* // The camera will automatically
* // rotate to look at [0, 0, 0].
* camera.lookAt(0, 0, 0);
*
* // The camera will move on the
* // x axis.
* camera.setPosition(sin(frameCount / 60) * 200, 0, 100);
* box(20);
*
* // A 'ground' box to give the viewer
* // a better idea of where the camera
* // is looking.
* translate(0, 50, 0);
* rotateX(HALF_PI);
* box(150, 150, 20);
* }
* eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ
* which describes camera position, orientation, and projection
* are also accessible via the camera object generated using
* createCamera()
*
* @class p5.Camera
* @param {rendererGL} rendererGL instance of WebGL renderer
* @example
*
* let cam;
* let delta = 0.01;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* normalMaterial();
* cam = createCamera();
* cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* // set initial pan angle
* cam.pan(-0.8);
* describe(
* 'camera view pans left and right across a series of rotating 3D boxes.'
* );
* }
*
* function draw() {
* background(200);
*
* // pan camera according to angle 'delta'
* cam.pan(delta);
*
* // every 160 frames, switch direction
* if (frameCount % 160 === 0) {
* delta *= -1;
* }
*
* rotateX(frameCount * 0.01);
* translate(-100, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* }
*
*
* let cam, div;
* function setup() {
* createCanvas(100, 100, WEBGL);
* background(0);
* cam = createCamera();
* div = createDiv();
* div.position(0, 0);
* describe('An example showing the use of camera object properties');
* }
*
* function draw() {
* orbitControl();
* box(10);
* div.html('eyeX = ' + cam.eyeX);
* }
*
* let cam, div;
* function setup() {
* createCanvas(100, 100, WEBGL);
* background(0);
* cam = createCamera();
* div = createDiv();
* div.position(0, 0);
* describe('An example showing the use of camera object properties');
* }
*
* function draw() {
* orbitControl();
* box(10);
* div.html('eyeY = ' + cam.eyeY);
* }
*
* let cam, div;
* function setup() {
* createCanvas(100, 100, WEBGL);
* background(0);
* cam = createCamera();
* div = createDiv();
* div.position(0, 0);
* describe('An example showing the use of camera object properties');
* }
*
* function draw() {
* orbitControl();
* box(10);
* div.html('eyeZ = ' + cam.eyeZ);
* }
*
* let cam, div;
* function setup() {
* createCanvas(100, 100, WEBGL);
* background(255);
* cam = createCamera();
* cam.lookAt(1, 0, 0);
* div = createDiv('centerX = ' + cam.centerX);
* div.position(0, 0);
* div.style('color', 'white');
* describe('An example showing the use of camera object properties');
* }
*
* function draw() {
* orbitControl();
* box(10);
* }
*
* let cam, div;
* function setup() {
* createCanvas(100, 100, WEBGL);
* background(255);
* cam = createCamera();
* cam.lookAt(0, 1, 0);
* div = createDiv('centerY = ' + cam.centerY);
* div.position(0, 0);
* div.style('color', 'white');
* describe('An example showing the use of camera object properties');
* }
*
* function draw() {
* orbitControl();
* box(10);
* }
*
* let cam, div;
* function setup() {
* createCanvas(100, 100, WEBGL);
* background(255);
* cam = createCamera();
* cam.lookAt(0, 0, 1);
* div = createDiv('centerZ = ' + cam.centerZ);
* div.position(0, 0);
* div.style('color', 'white');
* describe('An example showing the use of camera object properties');
* }
*
* function draw() {
* orbitControl();
* box(10);
* }
*
* let cam, div;
* function setup() {
* createCanvas(100, 100, WEBGL);
* background(255);
* cam = createCamera();
* div = createDiv('upX = ' + cam.upX);
* div.position(0, 0);
* div.style('color', 'blue');
* div.style('font-size', '18px');
* describe('An example showing the use of camera object properties');
* }
*
* let cam, div;
* function setup() {
* createCanvas(100, 100, WEBGL);
* background(255);
* cam = createCamera();
* div = createDiv('upY = ' + cam.upY);
* div.position(0, 0);
* div.style('color', 'blue');
* div.style('font-size', '18px');
* describe('An example showing the use of camera object properties');
* }
*
* let cam, div;
* function setup() {
* createCanvas(100, 100, WEBGL);
* background(255);
* cam = createCamera();
* div = createDiv('upZ = ' + cam.upZ);
* div.position(0, 0);
* div.style('color', 'blue');
* div.style('font-size', '18px');
* describe('An example showing the use of camera object properties');
* }
*
* // drag the mouse to look around!
*
* let cam;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* // create a camera
* cam = createCamera();
* cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* // give it a perspective projection
* cam.perspective(PI / 3.0, width / height, 0.1, 500);
* }
*
* function draw() {
* background(200);
* orbitControl();
* normalMaterial();
*
* rotateX(-0.3);
* rotateY(-0.2);
* translate(0, 0, -50);
*
* push();
* translate(-15, 0, sin(frameCount / 30) * 65);
* box(30);
* pop();
* push();
* translate(15, 0, sin(frameCount / 30 + PI) * 65);
* box(30);
* pop();
* }
*
*
* // drag the mouse to look around!
* // there's no vanishing point
*
* let cam;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* // create a camera
* cam = createCamera();
* cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* // give it an orthographic projection
* cam.ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);
* }
* function draw() {
* background(200);
* orbitControl();
* normalMaterial();
*
* rotateX(0.2);
* rotateY(-0.2);
* push();
* translate(-15, 0, sin(frameCount / 30) * 65);
* box(30);
* pop();
* push();
* translate(15, 0, sin(frameCount / 30 + PI) * 65);
* box(30);
* pop();
* }
*
*
* let cam;
*
* function setup() {
* x = createCanvas(100, 100, WEBGL);
* setAttributes('antialias', true);
* // create a camera
* cam = createCamera();
* cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* // set its frustum
* cam.frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);
* }
*
* function draw() {
* background(200);
* orbitControl();
* normalMaterial();
*
* rotateY(-0.2);
* rotateX(-0.3);
* push();
* translate(-15, 0, sin(frameCount / 30) * 25);
* box(30);
* pop();
* push();
* translate(15, 0, sin(frameCount / 30 + PI) * 25);
* box(30);
* pop();
* }
*
*
* let cam;
* let delta = 0.01;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* normalMaterial();
* cam = createCamera();
* cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* // set initial pan angle
* cam.pan(-0.8);
* }
*
* function draw() {
* background(200);
*
* // pan camera according to angle 'delta'
* cam.pan(delta);
*
* // every 160 frames, switch direction
* if (frameCount % 160 === 0) {
* delta *= -1;
* }
*
* rotateX(frameCount * 0.01);
* translate(-100, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* }
*
*
* let cam;
* let delta = 0.01;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* normalMaterial();
* cam = createCamera();
* cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* // set initial tilt
* cam.tilt(-0.8);
* }
*
* function draw() {
* background(200);
*
* // pan camera according to angle 'delta'
* cam.tilt(delta);
*
* // every 160 frames, switch direction
* if (frameCount % 160 === 0) {
* delta *= -1;
* }
*
* rotateY(frameCount * 0.01);
* translate(0, -100, 0);
* box(20);
* translate(0, 35, 0);
* box(20);
* translate(0, 35, 0);
* box(20);
* translate(0, 35, 0);
* box(20);
* translate(0, 35, 0);
* box(20);
* translate(0, 35, 0);
* box(20);
* translate(0, 35, 0);
* box(20);
* }
*
*
* let cam;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* normalMaterial();
* cam = createCamera();
* cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* }
*
* function draw() {
* background(200);
*
* // look at a new random point every 60 frames
* if (frameCount % 60 === 0) {
* cam.lookAt(random(-100, 100), random(-50, 50), 0);
* }
*
* rotateX(frameCount * 0.01);
* translate(-100, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* }
*
*
* let cam;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* // Create a camera.
* // createCamera() sets the newly created camera as
* // the current (active) camera.
* cam = createCamera();
* }
*
* function draw() {
* background(204);
* // Move the camera away from the plane by a sin wave
* cam.camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);
* plane(10, 10);
* }
*
*
* // move slider to see changes!
* // sliders control the first 6 parameters of camera()
*
* let sliderGroup = [];
* let X;
* let Y;
* let Z;
* let centerX;
* let centerY;
* let centerZ;
* let h = 20;
* let cam;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* // create a camera
* cam = createCamera();
* cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* // create sliders
* for (var i = 0; i < 6; i++) {
* if (i === 2) {
* sliderGroup[i] = createSlider(10, 400, 200);
* } else {
* sliderGroup[i] = createSlider(-400, 400, 0);
* }
* h = map(i, 0, 6, 5, 85);
* sliderGroup[i].position(10, height + h);
* sliderGroup[i].style('width', '80px');
* }
* }
*
* function draw() {
* background(60);
* // assigning sliders' value to each parameters
* X = sliderGroup[0].value();
* Y = sliderGroup[1].value();
* Z = sliderGroup[2].value();
* centerX = sliderGroup[3].value();
* centerY = sliderGroup[4].value();
* centerZ = sliderGroup[5].value();
* cam.camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);
* stroke(255);
* fill(255, 102, 94);
* box(85);
* }
*
*
* // see the camera move along its own axes while maintaining its orientation
* let cam;
* let delta = 0.5;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* normalMaterial();
* cam = createCamera();
* cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* }
*
* function draw() {
* background(200);
*
* // move the camera along its local axes
* cam.move(delta, delta, 0);
*
* // every 100 frames, switch direction
* if (frameCount % 150 === 0) {
* delta *= -1;
* }
*
* translate(-10, -10, 0);
* box(50, 8, 50);
* translate(15, 15, 0);
* box(50, 8, 50);
* translate(15, 15, 0);
* box(50, 8, 50);
* translate(15, 15, 0);
* box(50, 8, 50);
* translate(15, 15, 0);
* box(50, 8, 50);
* translate(15, 15, 0);
* box(50, 8, 50);
* }
*
*
* // press '1' '2' or '3' keys to set camera position
*
* let cam;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* normalMaterial();
* cam = createCamera();
* cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* }
*
* function draw() {
* background(200);
*
* // '1' key
* if (keyIsDown(49)) {
* cam.setPosition(30, 0, 80);
* }
* // '2' key
* if (keyIsDown(50)) {
* cam.setPosition(0, 0, 80);
* }
* // '3' key
* if (keyIsDown(51)) {
* cam.setPosition(-30, 0, 80);
* }
*
* box(20);
* }
*
*
* let cam, initialCam;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* strokeWeight(3);
*
* // Set the initial state to initialCamera and set it to the camera
* // used for drawing. Then set cam to be the active camera.
* cam = createCamera();
* cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* initialCam = createCamera();
* initialCam.camera(100, 100, 100, 0, 0, 0, 0, 0, -1);
* initialCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* cam.set(initialCam);
*
* setCamera(cam);
* }
*
* function draw() {
* orbitControl();
* background(255);
* box(50);
* translate(0, 0, -25);
* plane(100);
* }
*
* function doubleClicked(){
* // Double-click to return the camera to its initial position.
* cam.set(initialCam);
* }
*
*
* let cam0, cam1, cam;
* function setup() {
* createCanvas(100, 100, WEBGL);
* strokeWeight(3);
*
* // camera for slerp.
* cam = createCamera();
* cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* // cam0 is looking at the cube from the front.
* cam0 = createCamera();
* cam0.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* cam0.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* // cam1 is pointing straight to the right in the cube
* // at the same position as cam0 by doing a pan(-PI/2).
* cam1 = createCamera();
* cam1.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* cam1.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* cam1.pan(-PI/2);
*
* // we only use cam.
* setCamera(cam);
* }
*
* function draw() {
* // calculate amount.
* const amt = 0.5 - 0.5 * cos(frameCount * TAU / 120);
* // slerp cam0 and cam1 with amt, set to cam.
* // When amt moves from 0 to 1, cam moves from cam0 to cam1,
* // shaking the camera to the right.
* cam.slerp(cam0, cam1, amt);
*
* background(255);
* // Every time the camera turns right, the cube drifts left.
* box(40);
* }
*
*
* let cam, lastCam, initialCam;
* let countForReset = 30;
* // This sample uses orbitControl() to move the camera.
* // Double-clicking the canvas restores the camera to its initial state.
* function setup() {
* createCanvas(100, 100, WEBGL);
* strokeWeight(3);
*
* // main camera
* cam = createCamera();
* cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* // Camera for recording loc info before reset
* lastCam = createCamera();
* lastCam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* lastCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* // Camera for recording the initial state
* initialCam = createCamera();
* initialCam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* initialCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
*
* setCamera(cam); // set main camera
* }
*
* function draw() {
* if (countForReset < 30) {
* // if the reset count is less than 30,
* // it will move closer to the original camera as it increases.
* countForReset++;
* cam.slerp(lastCam, initialCam, countForReset / 30);
* } else {
* // if the count is 30,
* // you can freely move the main camera with orbitControl().
* orbitControl();
* }
*
* background(255);
* box(40);
* }
* // A double-click sets countForReset to 0 and initiates a reset.
* function doubleClicked() {
* if (countForReset === 30) {
* countForReset = 0;
* lastCam.set(cam);
* }
* }
*
*
* let cam1, cam2;
* let currentCamera;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* normalMaterial();
*
* cam1 = createCamera();
* cam1.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
* cam1.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
* cam2 = createCamera();
* cam2.setPosition(30, 0, 50);
* cam2.lookAt(0, 0, 0);
* cam2.ortho(-50, 50, -50, 50, 0, 200);
*
* // set variable for previously active camera:
* currentCamera = 1;
*
* describe(
* 'Canvas switches between two camera views, each showing a series of spinning 3D boxes.'
* );
* }
*
* function draw() {
* background(200);
*
* // every 100 frames, switch between the two cameras
* if (frameCount % 100 === 0) {
* if (currentCamera === 1) {
* setCamera(cam1);
* currentCamera = 0;
* } else {
* setCamera(cam2);
* currentCamera = 1;
* }
* }
*
* // camera 1:
* cam1.lookAt(0, 0, 0);
* cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);
*
* drawBoxes();
* }
*
* function drawBoxes() {
* rotateX(frameCount * 0.01);
* translate(-100, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* translate(35, 0, 0);
* box(20);
* }
*
*
* // Initialize storage with a capacity of 4
* const storage = new DataArray(4);
* console.log(storage.data.length); // 4
* console.log(storage.length); // 0
* console.log(storage.dataArray()); // Empty Float32Array
*
* storage.push(1, 2, 3, 4, 5, 6);
* console.log(storage.data.length); // 8
* console.log(storage.length); // 6
* console.log(storage.dataArray()); // Float32Array{1, 2, 3, 4, 5, 6}
*
*
* let framebuffer;
* function setup() {
* createCanvas(100, 100, WEBGL);
* framebuffer = createFramebuffer();
* noStroke();
* }
*
* function mouseMoved() {
* framebuffer.resize(
* max(20, mouseX),
* max(20, mouseY)
* );
* }
*
* function draw() {
* // Draw to the framebuffer
* framebuffer.begin();
* background(255);
* normalMaterial();
* sphere(20);
* framebuffer.end();
*
* background(100);
* // Draw the framebuffer to the main canvas
* image(framebuffer, -width/2, -height/2);
* }
*
*
* let framebuffer;
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* const useFramebuffer = (frameCount % 120) > 60;
* if (useFramebuffer && !framebuffer) {
* // Create a new framebuffer for us to use
* framebuffer = createFramebuffer();
* } else if (!useFramebuffer && framebuffer) {
* // Free the old framebuffer's resources
* framebuffer.remove();
* framebuffer = undefined;
* }
*
* background(255);
* if (useFramebuffer) {
* // Draw to the framebuffer
* framebuffer.begin();
* background(255);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* fill(255, 0, 0);
* box(30);
* framebuffer.end();
*
* image(framebuffer, -width/2, -height/2);
* }
* }
*
*
* let framebuffer;
* function setup() {
* createCanvas(100, 100, WEBGL);
* framebuffer = createFramebuffer();
* noStroke();
* }
*
* function draw() {
* // Draw to the framebuffer
* framebuffer.begin();
* background(255);
* translate(0, 10*sin(frameCount * 0.01), 0);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* fill(255, 0, 0);
* box(50);
* framebuffer.end();
*
* background(100);
* // Draw the framebuffer to the main canvas
* image(framebuffer, -50, -50, 25, 25);
* image(framebuffer, 0, 0, 35, 35);
* }
*
*
* let framebuffer;
* function setup() {
* createCanvas(100, 100, WEBGL);
* framebuffer = createFramebuffer();
* noStroke();
* }
*
* function draw() {
* // Draw to the framebuffer
* framebuffer.draw(function() {
* background(255);
* translate(0, 10*sin(frameCount * 0.01), 0);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* fill(255, 0, 0);
* box(50);
* });
*
* background(100);
* // Draw the framebuffer to the main canvas
* image(framebuffer, -50, -50, 25, 25);
* image(framebuffer, 0, 0, 35, 35);
* }
*
*
* let framebuffer;
* function setup() {
* createCanvas(100, 100, WEBGL);
* framebuffer = createFramebuffer();
* }
* function draw() {
* noStroke();
* lights();
*
* // Draw a sphere to the framebuffer
* framebuffer.begin();
* background(0);
* sphere(25);
* framebuffer.end();
*
* // Load its pixels and draw a gradient over the lower half of the canvas
* framebuffer.loadPixels();
* for (let y = height/2; y < height; y++) {
* for (let x = 0; x < width; x++) {
* const idx = (y * width + x) * 4;
* framebuffer.pixels[idx] = (x / width) * 255;
* framebuffer.pixels[idx + 1] = (y / height) * 255;
* framebuffer.pixels[idx + 2] = 255;
* framebuffer.pixels[idx + 3] = 255;
* }
* }
* framebuffer.updatePixels();
*
* // Draw a cube on top of the pixels we just wrote
* framebuffer.begin();
* push();
* translate(20, 20);
* rotateX(0.5);
* rotateY(0.5);
* box(20);
* pop();
* framebuffer.end();
*
* image(framebuffer, -width/2, -height/2);
* noLoop();
* }
*
*
* let framebuffer;
* function setup() {
* createCanvas(100, 100, WEBGL);
* framebuffer = createFramebuffer();
* noStroke();
* }
*
* function draw() {
* // Draw to the framebuffer
* framebuffer.begin();
* background(255);
* normalMaterial();
* sphere(20);
* framebuffer.end();
*
* // Draw the framebuffer to the main canvas
* image(framebuffer.color, -width/2, -height/2);
* }
*
*
* let framebuffer;
* let depthShader;
*
* const vert = `
* precision highp float;
* attribute vec3 aPosition;
* attribute vec2 aTexCoord;
* uniform mat4 uModelViewMatrix;
* uniform mat4 uProjectionMatrix;
* varying vec2 vTexCoord;
* void main() {
* vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);
* gl_Position = uProjectionMatrix * viewModelPosition;
* vTexCoord = aTexCoord;
* }
* `;
*
* const frag = `
* precision highp float;
* varying vec2 vTexCoord;
* uniform sampler2D depth;
* void main() {
* float depthVal = texture2D(depth, vTexCoord).r;
* gl_FragColor = mix(
* vec4(1., 1., 0., 1.), // yellow
* vec4(0., 0., 1., 1.), // blue
* pow(depthVal, 6.)
* );
* }
* `;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* framebuffer = createFramebuffer();
* depthShader = createShader(vert, frag);
* noStroke();
* }
*
* function draw() {
* // Draw to the framebuffer
* framebuffer.begin();
* background(255);
* rotateX(frameCount * 0.01);
* box(20, 20, 100);
* framebuffer.end();
*
* push();
* shader(depthShader);
* depthShader.setUniform('depth', framebuffer.depth);
* plane(framebuffer.width, framebuffer.height);
* pop();
* }
*
*
* let shape01;
* let shape02;
* let points = [];
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* points.push(new p5.Vector(-1, -1, 0), new p5.Vector(-1, 1, 0),
* new p5.Vector(1, -1, 0), new p5.Vector(-1, -1, 0));
* buildShape01();
* buildShape02();
* }
* function draw() {
* background(0);
* fill('pink'); // shape01 retains its internal blue color, so it won't turn pink.
* model(shape01);
* fill('yellow'); // Now, shape02 is yellow.
* model(shape02);
* }
*
* function buildShape01() {
* beginGeometry();
* fill('blue'); // shape01's color is blue because its internal colors remain.
* beginShape();
* for (let vec of points) vertex(vec.x * 100, vec.y * 100, vec.z * 100);
* endShape(CLOSE);
* shape01 = endGeometry();
* }
*
* function buildShape02() {
* beginGeometry();
* fill('red'); // shape02.clearColors() removes its internal colors. Now, shape02 is red.
* beginShape();
* for (let vec of points) vertex(vec.x * 200, vec.y * 200, vec.z * 200);
* endShape(CLOSE);
* shape02 = endGeometry();
* shape02.clearColors(); // Resets shape02's colors.
* }
*
*
* let img;
* let model1;
* let model2;
*
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* createCanvas(150, 150, WEBGL);
* background(200);
*
* model1 = createShape(50, 50);
* model2 = createShape(50, 50);
* model2.flipU();
* }
*
* function draw() {
* background(0);
*
* // original
* push();
* translate(-40, 0, 0);
* texture(img);
* noStroke();
* plane(50);
* model(model1);
* pop();
*
* // flipped
* push();
* translate(40, 0, 0);
* texture(img);
* noStroke();
* plane(50);
* model(model2);
* pop();
* }
*
* function createShape(w, h) {
* return buildGeometry(() => {
* textureMode(NORMAL);
* beginShape();
* vertex(-w / 2, -h / 2, 0, 0);
* vertex(w / 2, -h / 2, 1, 0);
* vertex(w / 2, h / 2, 1, 1);
* vertex(-w / 2, h / 2, 0, 1);
* endShape(CLOSE);
* });
* }
*
*
* let img;
* let model1;
* let model2;
*
* function preload() {
* img = loadImage('assets/laDefense.jpg');
* }
*
* function setup() {
* createCanvas(150, 150, WEBGL);
* background(200);
*
* model1 = createShape(50, 50);
* model2 = createShape(50, 50);
* model2.flipV();
* }
*
* function draw() {
* background(0);
*
* // original
* push();
* translate(-40, 0, 0);
* texture(img);
* noStroke();
* plane(50);
* model(model1);
* pop();
*
* // flipped
* push();
* translate(40, 0, 0);
* texture(img);
* noStroke();
* plane(50);
* model(model2);
* pop();
* }
*
* function createShape(w, h) {
* return buildGeometry(() => {
* textureMode(NORMAL);
* beginShape();
* vertex(-w / 2, -h / 2, 0, 0);
* vertex(w / 2, -h / 2, 1, 0);
* vertex(w / 2, h / 2, 1, 1);
* vertex(-w / 2, h / 2, 0, 1);
* endShape(CLOSE);
* });
* }
*
*
* let helix;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
*
* helix = buildGeometry(() => {
* beginShape();
*
* for (let i = 0; i < TWO_PI * 3; i += 0.6) {
* let radius = 20;
* let x = cos(i) * radius;
* let y = sin(i) * radius;
* let z = map(i, 0, TWO_PI * 3, -30, 30);
* vertex(x, y, z);
* }
* endShape();
* });
* helix.computeNormals();
* }
* function draw() {
* background(255);
* stroke(0);
* fill(150, 200, 250);
* lights();
* rotateX(PI*0.2);
* orbitControl();
* model(helix);
* }
*
*
* let star;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
*
* star = buildGeometry(() => {
* beginShape();
* for (let i = 0; i < TWO_PI; i += PI / 5) {
* let outerRadius = 60;
* let innerRadius = 30;
* let xOuter = cos(i) * outerRadius;
* let yOuter = sin(i) * outerRadius;
* let zOuter = random(-20, 20);
* vertex(xOuter, yOuter, zOuter);
*
* let nextI = i + PI / 5 / 2;
* let xInner = cos(nextI) * innerRadius;
* let yInner = sin(nextI) * innerRadius;
* let zInner = random(-20, 20);
* vertex(xInner, yInner, zInner);
* }
* endShape(CLOSE);
* });
* star.computeNormals(SMOOTH);
* }
* function draw() {
* background(255);
* stroke(0);
* fill(150, 200, 250);
* lights();
* rotateX(PI*0.2);
* orbitControl();
* model(star);
* }
*
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(255);
* push();
* rotateZ(frameCount * 0.02);
* rotateX(frameCount * 0.02);
* rotateY(frameCount * 0.02);
* fill(0, 0, 0);
* box(50);
* pop();
* }
*
*
* function setup() {
* setAttributes('antialias', true);
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(255);
* push();
* rotateZ(frameCount * 0.02);
* rotateX(frameCount * 0.02);
* rotateY(frameCount * 0.02);
* fill(0, 0, 0);
* box(50);
* pop();
* }
*
*
* // press the mouse button to disable perPixelLighting
* function setup() {
* createCanvas(100, 100, WEBGL);
* noStroke();
* fill(255);
* }
*
* let lights = [
* { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
* { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
* { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
* { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
* { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
* { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
* ];
*
* function draw() {
* let t = millis() / 1000 + 1000;
* background(0);
* directionalLight(color('#222'), 1, 1, 1);
*
* for (let i = 0; i < lights.length; i++) {
* let light = lights[i];
* pointLight(
* color(light.c),
* p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
* );
* }
*
* specularMaterial(255);
* sphere(width * 0.1);
*
* rotateX(t * 0.77);
* rotateY(t * 0.83);
* rotateZ(t * 0.91);
* torus(width * 0.3, width * 0.07, 24, 10);
* }
*
* function mousePressed() {
* setAttributes('perPixelLighting', false);
* noStroke();
* fill(255);
* }
* function mouseReleased() {
* setAttributes('perPixelLighting', true);
* noStroke();
* fill(255);
* }
*
*
* function setup() {
* createCanvas(200, 200, WEBGL);
* }
*
* function draw() {
* background(0);
* noStroke();
* fill(100, 100, 240);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* box(75, 75, 75);
* }
*
*
* function setup() {
* createCanvas(200, 200, WEBGL);
* }
*
* function draw() {
* background(0);
* stroke(240, 150, 150);
* fill(100, 100, 240);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* box(75, 75, 75);
* }
*
*
* function setup() {
* createCanvas(200, 400, WEBGL);
* setAttributes('antialias', true);
* }
*
* function draw() {
* background(0);
* noStroke();
* translate(0, -100, 0);
* stroke(240, 150, 150);
* fill(100, 100, 240);
* push();
* strokeWeight(8);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* sphere(75);
* pop();
* push();
* translate(0, 200, 0);
* strokeWeight(1);
* rotateX(frameCount * 0.01);
* rotateY(frameCount * 0.01);
* sphere(75);
* pop();
* }
*
*
* let graphic = createGraphics(200, 200, WEBGL);
* let graphicShader = graphic.createShader(vert, frag);
* graphic.shader(graphicShader); // Use graphicShader on the graphic
*
* let mainShader = graphicShader.copyToContext(window);
* shader(mainShader); // Use `mainShader` on the main canvas
*
*
* // Click within the image to toggle the value of uniforms
* // Note: for an alternative approach to the same example,
* // involving toggling between shaders please refer to:
* // https://p5js.org/reference/#/p5/shader
*
* let grad;
* let showRedGreen = false;
*
* function preload() {
* // note that we are using two instances
* // of the same vertex and fragment shaders
* grad = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
* }
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* shader(grad);
* noStroke();
*
* describe(
* 'canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.'
* );
* }
*
* function draw() {
* // update the offset values for each scenario,
* // moving the "grad" shader in either vertical or
* // horizontal direction each with differing colors
*
* if (showRedGreen === true) {
* grad.setUniform('colorCenter', [1, 0, 0]);
* grad.setUniform('colorBackground', [0, 1, 0]);
* grad.setUniform('offset', [sin(millis() / 2000), 1]);
* } else {
* grad.setUniform('colorCenter', [1, 0.5, 0]);
* grad.setUniform('colorBackground', [0.226, 0, 0.615]);
* grad.setUniform('offset', [0, sin(millis() / 2000) + 1]);
* }
* quad(-1, -1, 1, -1, 1, 1, -1, 1);
* }
*
* function mouseClicked() {
* showRedGreen = !showRedGreen;
* }
*
*